fix(react): transpile SVGR into React 19 compatible component (#29543)

This PR fixes an issue with React 19 and our `@nx/react/plugins/jest`
transform. The current transform uses an unsupported `$$typeof` symbol,
and also uses the deprecated `forwardRef` API.

The updated transform will use new API for React 19 and older, while
maintaining the previous API for React 18 and earlier. The backwards
compatibility may be needed if the test is using `ref`, which requires
`forwardRef` older versions.

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
SVGR fails in Jest tests with React 19

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
SVGR works

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Jack Hsu 2025-01-07 18:26:02 -05:00 committed by GitHub
parent 8dc100a1af
commit 90c0c8ebf6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -17,17 +17,12 @@ module.exports = {
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
ReactComponent: function ${componentName}(props) {
return React.createElement(
'svg',
Object.assign({}, props, { children: ${assetFilename} })
);
},
};`,
};
}