SVG Image Import: Support for defaultProps will be removed from function components

[kfoubert]

All my imports for SVG images are showing this error and making it difficult to debug other issues.

Setup

Gatsby 5.13.3 using Typescript gatsby-plugin-react-svg 3.3.0

configs

gatsby-config.ts

{
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /img\/.*\.svg/, 
        },
      },
    },

svg.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

sample code

import WarningIcon from 'img/icons/icon-warning.svg';

Sample Error Browser Warning

There's a lot of them.

Warning: IconWarning: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at IconWarning
    at div
    at div
    at div
    at AlertBar (webpack-internal:///./src/components/partials/alert-bar.tsx:24:5)
    at div
    at Layout (webpack-internal:///./src/components/layout.tsx:28:5)
    at Kitchen (webpack-internal:///./src/pages/kitchen.tsx?export=default:61:5)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:24:76)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:34:30)
    at RouteHandler
    at div
    at re (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9865)
    at ee (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9680)
    at ae (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10957)
    at oe (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10831)
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:23:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:252:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:18:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:61:29)
    at eval (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:8283)
    at F (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7181)
    at H (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7483)
    at WithErrorBoundary()
    at G (webpack-internal:///./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9074)
    at Root
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:129:32)
    at SliceDataStore (webpack-internal:///./.cache/query-result-store.js:176:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:20:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:119:5)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:167:80)

[yurist38]

Same here. I confirm this issue. It shows up after I upgraded React from v18.2.79 to v18.3.2. Can't find a solution so far

[UPDATE] I've just migrated away from using this plugin because it seems like the issue comes from the dependency, the package svg-react-loader which is not actively maintained. I've replaced this plugin with gatsby-plugin-svgr (don't forget also adding the @svgr/webpack as a dependency). It does the job but I had to slightly adjust the component usage in this manner:

// BEFORE
import MySvg from './my-img.svg';
render <MySvg />;

// NOW
import { ReactComponent as MySvg } from './my-img.svg';
render <MySvg />;

Also, I had to adjust my TypeScript types' definition for the SVG files. It looks like this now:

declare module '*.svg' {
  import { FC, SVGProps } from 'react';
  export const ReactComponent: FC<SVGProps<SVGElement>>;
}

[trippingcats]

@yurist38's solution works perfectly!

However, we ended up using gatsby-plugin-svgr-svgo (https://github.com/pixel-point/gatsby-plugin-svgr-svgo), which also works very well. Additionally, there's no need to update the import declarations if you tweak the advanced configuration: https://github.com/pixel-point/gatsby-plugin-svgr-svgo?tab=readme-ov-file#advanced-configuration.

[mawiswiss]

Jep, same. I replace everything with gatsby-plugin-svgr-svgo and added this config (worked without changing any imports):

{
    resolve: "gatsby-plugin-svgr-svgo",
    options: {
        inlineSvgOptions: [
            {
                test: /images\/.*\.svg$/,
                svgoConfig: {
                    plugins: [
                        {
                            name: "preset-default",
                            params: {
                                overrides: [{ name: "removeViewBox", active: false }],
                            },
                        },
                        "prefixIds",
                    ],
                },
            },
        ],
    },
}