`defaultProps` is deprecated for fn components

[Grohden]

trafficstars

Message from react: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-apis

[ljharb]

Indeed, we should add an option that skips adding the defaultProps, and uses inline defaulting in the function body instead (we can't use parameter default syntax or ??, since babel won't be applied to our output)

[baeroe]

Good to read that this issue will be addressed. Any idea when a fix will be released?

[ljharb]

Presumably when someone files a PR adding that option (not a fix, because nothing’s broken, especially since react 19 isn’t even out yet)

[hon2a]

While it is technically true that nothing is broken, those using this plugin to compile their SVG now have their console chock-full of warnings, which makes it harder to see the more useful content in there. Which is not to say that a call for a PR isn't fair :)

[ryanfiller]

My job has a script that will fail any tests if they throw unaddressed warnings, so this has actually caused pretty big problems for me.

[Grohden]

when I opened the issue I took a little look into how to solve.. but like, I don't really know what level of compatibility is wanted for this one, but if we can use Object.assign, in theory we could do something along these lines (?):

    const defaultProps = SVG_DEFAULT_PROPS_CODE 
          ? `const props = Object.assign({}, SVG_DEFAULT_PROPS_CODE, overrides)` 
          : `const props = overrides`;
    const namedTemplate = `
      var SVG_NAME = function SVG_NAME(overrides) { ${defaultProps}; return SVG_CODE; };
      ${IS_EXPORT ? 'export { SVG_NAME };' : ''}
    `;
    const anonymousTemplate = `
      var Component = function (overrides) { ${defaultProps}; return SVG_CODE; };
      Component.displayName = 'EXPORT_FILENAME';
      export default Component;
    `;

for: https://github.com/airbnb/babel-plugin-inline-react-svg/blob/master/src/index.js#L29-L39

[ghost1face]

I used patch-package and used @Grohden's approach and that resolves everything for me. He does raise a good point on what level of compatibility in the future but this can work.

I'd wonder what other's mileage looks like with this in place

[hon2a]

@ghost1face I ended up just putting -defaultProps in the Chrome DevTools console filter bar and forgetting about the whole thing.

[ljharb]

@Grohden we can't use Object.assign but we can use the same semantics via the object.assign package. @Grohden, a PR would be appreciated.