Warning: Support for defaultProps will be removed from function components

[donfour]

Describe/explain the bug
Getting the following error when using Nivo with Next.js 13 inside app router:

app-index.js:31 Warning: Jr: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

It doesn't affect the chart rendering though. It's just a bit annoying to see a long error in the console. Other libraries are also seeing a similar issue:

• Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at {Component} recharts/recharts#3615
• FunctionComp.defaultProps is going to be deprecated in React 18.3.0 chakra-ui/chakra-ui#7057

Wondering if Nivo has a plan to move from defaultProps to JS default parameters? It seems like quite a large refactor. Happy to contribute if needed. Thanks!

To Reproduce
Codesandbox: https://codesandbox.io/p/sandbox/frosty-tom-fgddxp

Steps to reproduce the behavior:

1. Go to the codesandbox
2. Open the preview in a new tab
3. Open dev tool console
4. See error

Expected behavior
Rendering a chart should throw no error.

[RobertAron]

I'm running into this issue as well. The warning is quite long also, which makes it difficult to parse other logs that appear in the inspector.

I understand this could be a large refactor... If anyone has suggestions for a hack to suppress warnings about this issue temporarily I would really appreciate it ❤️

[bernatfortet]

Any updates on this?
Has anyone found a way to hide the warnings?

[andre19980]

I tried to do the refactor (based in the similar issue that @donfour linked to the description) but the deploy has failed and I guess I don't have access to vercel to see the logs :(

[dreampulse]

I fixed that by patching the console.log, since the warning is polluting the developer experience.
(And for me, the issue is just occurring in external libraries)

if (process.env.NODE_ENV !== "production") {
  // eslint-disable-next-line no-console
  const originalWarn = console.error;
  // eslint-disable-next-line no-console
  console.error = (...args) => {
    if (
      args[0].includes(
        "Support for defaultProps will be removed from function components in a future major release.",
      )
    ) {
      return;
    }
    originalWarn(...args);
  };
}

[ClydSpyd]

Hello!

Any update on this issue?

[andre19980]

@ClydSpyd it's waiting for a release! @plouc Any plans to release a new version soon? Is there something I can help?

[plouc]

Sorry, I just didn't have the time to release, I'll try to find some time in the upcoming weeks.

[emiliodacosta]

I fixed that by patching the console.log, since the warning is polluting the developer experience. (And for me, the issue is just occurring in external libraries)

if (process.env.NODE_ENV !== "production") {
  // eslint-disable-next-line no-console
  const originalWarn = console.error;
  // eslint-disable-next-line no-console
  console.error = (...args) => {
    if (
      args[0].includes(
        "Support for defaultProps will be removed from function components in a future major release.",
      )
    ) {
      return;
    }
    originalWarn(...args);
  };
}

@dreampulse where did you put this code for it to work?

[rksahu2601]

I noticed the warning message only appears locally and not in production. (ReCharts)

[edu-amr]

Something similar is happening at recharts/recharts#3615

[hassansw]

const originalConsoleError = console.error;
console.error = (message, ...args) => {
    if (typeof message === 'string' && message.includes('defaultProps will be removed')) {
        return;
    }
    originalConsoleError.apply(console, [message, ...args])
}

Done

[plouc]

This issue has been fixed in the latest version (0.87.0).

[fukemy]

if (process.env.NODE_ENV !== "production") {
  // eslint-disable-next-line no-console
  const originalWarn = console.error;
  // eslint-disable-next-line no-console
  console.error = (...args) => {
    if (
      args[0].includes(
        "Support for defaultProps will be removed from function components in a future major release.",
      )
    ) {
      return;
    }
    originalWarn(...args);
  };
}

Can someone guide me where to put above code? I am using NextJs

[lokichaulagain]

if (process.env.NODE_ENV !== "production") {
  // eslint-disable-next-line no-console
  const originalWarn = console.error;
  // eslint-disable-next-line no-console
  console.error = (...args) => {
    if (
      args[0].includes(
        "Support for defaultProps will be removed from function components in a future major release.",
      )
    ) {
      return;
    }
    originalWarn(...args);
  };
}

Can someone guide me where to put above code? I am using NextJs

In your Next.js page where we’re using react-beautiful-dnd, we are simply hiding the warning message without fixing it. Note: This approach uses defaultProps, which may be removed in React 19, so it’s only compatible with React 18.

"use client";
import dynamic from "next/dynamic";
const DraggableList = dynamic(() => import("./(components)/DraggableList"), { ssr: false });

export default function Page() {
  //  Hide warning message from react-beautiful-dnd library
  const originalWarn = console.error;
  console.error = (...args) => {
    const warningMessage = args[0];
    if (warningMessage.includes("Support for defaultProps will be removed from function components in a future major release.") || warningMessage.includes("Support for defaultProps will be removed from memo components in a future major release.")) {
      return;
    }
    originalWarn(...args);
  };

  return (
    <div>
      <h1 className="text-xl font-bold mb-4">Draggable List</h1>
      <DraggableList />
    </div>
  );
}