@svgr/webpack generates React components with defaultProps, causing warnings in console. how to resolve this?

[Naveen-Bhati]

When using @svgr/webpack, the generated React components for SVGs still include defaultProps, which results in the following warning in the console when using React.

"Warning: Component.defaultProps is not supported in React future releases. Use JavaScript default parameters instead."

I've tried various approches to reolve but no luck till now.
currently i'm using this config for the svgr/webpack

// svgr.config.js
{
expandProps: ,false
replaceAttrValues: {},
prettier: true,
typescript: true, // if you're using TypeScript
jsxRuntime: 'automatic', // or 'classic' depending on your setup
// Disable defaultProps
svgo: true,
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false,
},
],
},
template: (variables, { tpl }) => {
return tplimport * as React from 'react'; const ${variables.componentName} = ({ title = "default title", ...props }) => ( ${variables.jsx} ); export default ${variables.componentName};;
}
};

[tractorcow]

I have the same issue, and spent a little bit of time to figure out what is actually causing this, but I can't see how the webpack plugin is achieving it. Is @svgr/webpack the cause or is it a dependency?

[tractorcow]

Could it be related to airbnb/babel-plugin-inline-react-svg#8?

[tractorcow]

Yep, that seems to be the true cause. Watch airbnb/babel-plugin-inline-react-svg#86 to see when / if this is resolved. I'd contribute but I don't really know enough about babel to be confident in submitting a fix.