From 90c0c8ebf615eddf6e88f4ec9101ea611ddc0769 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Tue, 7 Jan 2025 18:26:02 -0500
Subject: [PATCH] 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 #
---
 packages/react/plugins/jest.ts | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/react/plugins/jest.ts b/packages/react/plugins/jest.ts
index 0bca2bfd86..ed50db3c10 100644
--- a/packages/react/plugins/jest.ts
+++ b/packages/react/plugins/jest.ts
@@ -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} })
+          );
+        },
       };`,
       };
     }