I have an existing next.js codebase with multiple bugs that need fixing. Currently the console is filled with:

Warning: ArrowLeftInline: Support for defaultProps will be removed from function ponents in a future major release. 
Warning: GithubInline: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.
Warning: GlobeInline: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.

These seem to be ing from Reactified-SVG files. Eg, there's no GlobeInline ponent, but only:

import Globe from "../../public/src/img/icons/Globe.inline.svg";

Which is simply a react-ified SVG file:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="globe" class="svg-inline--fa fa-globe fa-w-16" role="img" xmlns="; viewBox="0 0 496 512"><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg>

Why does React/Next think I am using defaultProps for these SVG files?

How can I fix or suppress the warnings so I can read the console?

I have an existing next.js codebase with multiple bugs that need fixing. Currently the console is filled with:

Warning: ArrowLeftInline: Support for defaultProps will be removed from function ponents in a future major release. 
Warning: GithubInline: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.
Warning: GlobeInline: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.

These seem to be ing from Reactified-SVG files. Eg, there's no GlobeInline ponent, but only:

import Globe from "../../public/src/img/icons/Globe.inline.svg";

Which is simply a react-ified SVG file:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="globe" class="svg-inline--fa fa-globe fa-w-16" role="img" xmlns="http://www.w3/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg>

Why does React/Next think I am using defaultProps for these SVG files?

How can I fix or suppress the warnings so I can read the console?

• javascript
• reactjs
• typescript
• svg
• next.js

• No. React does not have a way to disable this warning. And instead of trying to hide it you should check which npm package has this problem and open an issue on their github. Or better yet create a pull request that replaces defaultProps in their package. – zoran404 Commented Jul 17, 2024 at 2:44
• @zoran404 as mentioned in the question, the package with this problem is an SVG file. – mikemaccana Commented Jul 17, 2024 at 13:25
• 1 You can not import svg files directly as a react ponent. You must have a loader in your next.config.mjs that handles svg files. And that loader is probably outdated. I checked the current version of one popular loader @svgr/webpack in next.js 14 and I do not see any errors. You should check which loader you are using and try updating or replacing it. Or simplify everything by using <img src="...svg"> instead of reactifying svg files. – zoran404 Commented Jul 17, 2024 at 16:45
• Thanks @zoran404! I am working on a pletely different codebase now but I appreciate the effort. – mikemaccana Commented Jul 17, 2024 at 17:36

1 Answer 1

I had the same problem but for Recharts. and I am assuming that this solution must work for your case or similar cases also.

The message I was receiving in the console was:

Warning: XAxis: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.

Warning: YAxis: Support for defaultProps will be removed from function ponents in a future major release. Use JavaScript default parameters instead.

and I bypassed it by adding the following:

useEffect(() => {
    const originalConsoleError = console.error;

    console.error = (...args: any[]) => {
      if (typeof args[0] === "string" && /defaultProps/.test(args[0])) {
        return;
      }

      originalConsoleError(...args);
    };

    return () => {
      console.error = originalConsoleError;
    };
  }, []);

Please be advised that since you are using useEffect you must also add "use client" directive to the top of the page.