feat(react): update @types/react and other packages (#9767)

e2e/react/src/react.test.ts

@@ -87,29 +87,10 @@ describe('React Applications', () => {
     const appName = uniq('app');
     const libName = uniq('lib');
 
-    runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
-    runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
+    runCLI(`generate @nrwl/react:app ${appName} --no-interactive --js`);
+    runCLI(`generate @nrwl/react:lib ${libName} --no-interactive --js`);
 
-    renameFile(`apps/${appName}/src/main.tsx`, `apps/${appName}/src/main.jsx`);
-    renameFile(
-      `apps/${appName}/src/app/app.tsx`,
-      `apps/${appName}/src/app/app.jsx`
-    );
-    renameFile(
-      `apps/${appName}/src/app/app.spec.tsx`,
-      `apps/${appName}/src/app/app.spec.jsx`
-    );
-    renameFile(
-      `apps/${appName}/src/polyfills.ts`,
-      `apps/${appName}/src/polyfills.js`
-    );
-    updateProjectConfig(appName, (config) => {
-      config.targets.build.options.main = `apps/${appName}/src/main.jsx`;
-      config.targets.build.options.polyfills = `apps/${appName}/src/polyfills.js`;
-      return config;
-    });
-
-    const mainPath = `apps/${appName}/src/main.jsx`;
+    const mainPath = `apps/${appName}/src/main.js`;
     updateFile(
       mainPath,
       `import '@${proj}/${libName}';\n${readFile(mainPath)}`

packages/react/migrations.json

@@ -287,6 +287,43 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "13.10.1": {
+      "version": "13.10.1-beta.1",
+      "packages": {
+        "@types/react": {
+          "version": "18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-dom": {
+          "version": "18.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/styled-components": {
+          "version": "5.1.25",
+          "alwaysAddToPackageJson": false
+        },
+        "@emotion/react": {
+          "version": "11.9.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/react": {
+          "version": "13.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@reduxjs/toolkit": {
+          "version": "1.8.1",
+          "alwaysAddToPackageJson": false
+        },
+        "react-redux": {
+          "version": "7.2.8",
+          "alwaysAddToPackageJson": false
+        },
+        "eslint-plugin-import": {
+          "version": "2.26.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/react/src/generators/application/files/common/src/main.tsx__tmpl__

@@ -1,7 +1,10 @@
 <% if (strict) { %>import { StrictMode } from 'react';<% } %>
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 <% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
 
 import App from './app/<%= fileName %>';
 
-ReactDOM.render(<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>, document.getElementById('root'));
+const root = ReactDOMClient.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
+);

packages/react/src/utils/ast-utils.spec.ts

@@ -219,7 +219,7 @@ describe('findMainRenderStatement', () => {
     tree = createTreeWithEmptyWorkspace();
   });
 
-  it('should return render(...)', () => {
+  it('should return ReactDOM.render(...)', () => {
     const sourceCode = `
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -237,6 +237,25 @@ ReactDOM.render(<div/>, document.getElementById('root'));
     expect(node).toBeTruthy();
   });
 
+  it('should return root.render(...)', () => {
+    const sourceCode = `
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<div/>);
+      `;
+    tree.write('/main.tsx', sourceCode);
+    const source = ts.createSourceFile(
+      '/main.tsx',
+      sourceCode,
+      ts.ScriptTarget.Latest,
+      true
+    );
+
+    const node = utils.findMainRenderStatement(source);
+    expect(node).toBeTruthy();
+  });
+
   it('should return render(...)', () => {
     const sourceCode = `
 import React from 'react';

packages/react/src/utils/ast-utils.ts

@@ -43,13 +43,23 @@ export function findMainRenderStatement(
 
   for (const expr of calls) {
     const inner = expr.expression;
+    // React 17 and below
     if (
       ts.isPropertyAccessExpression(inner) &&
       /ReactDOM/i.test(inner.expression.getText()) &&
       inner.name.getText() === 'render'
     ) {
       return expr;
     }
+
+    // React 18
+    if (
+      ts.isPropertyAccessExpression(inner) &&
+      /root/.test(inner.expression.getText()) &&
+      inner.name.getText() === 'render'
+    ) {
+      return expr;
+    }
   }
 
   // 2. Try to find render from 'react-dom'.
@@ -358,7 +368,7 @@ export function addReduxStoreToMain(
 ): StringChange[] {
   const renderStmt = findMainRenderStatement(source);
   if (!renderStmt) {
-    logger.warn(`Could not find ReactDOM.render in ${sourcePath}`);
+    logger.warn(`Could not find render(...) in ${sourcePath}`);
     return [];
   }
   const jsx = renderStmt.arguments[0];

packages/react/src/utils/versions.ts

@@ -3,30 +3,30 @@ export const nxVersion = '*';
 export const reactVersion = '18.0.0';
 export const reactDomVersion = '18.0.0';
 export const reactIsVersion = '18.0.0';
-export const typesReactVersion = '17.0.43';
-export const typesReactDomVersion = '17.0.14';
+export const typesReactVersion = '18.0.0';
+export const typesReactDomVersion = '18.0.0';
 export const typesReactIsVersion = '17.0.3';
 
 export const styledComponentsVersion = '5.3.5';
-export const typesStyledComponentsVersion = '5.1.24';
+export const typesStyledComponentsVersion = '5.1.25';
 
 export const emotionStyledVersion = '11.8.1';
-export const emotionReactVersion = '11.8.2';
+export const emotionReactVersion = '11.9.0';
 export const emotionBabelPlugin = '11.7.2';
 
 export const styledJsxVersion = '5.0.2';
 
 export const reactRouterDomVersion = '5.3.0';
 export const typesReactRouterDomVersion = '5.3.3';
 
-export const testingLibraryReactVersion = '12.1.4';
+export const testingLibraryReactVersion = '13.0.0';
 export const testingLibraryReactHooksVersion = '7.0.2';
 
-export const reduxjsToolkitVersion = '1.8.0';
-export const reactReduxVersion = '7.2.6';
+export const reduxjsToolkitVersion = '1.8.1';
+export const reactReduxVersion = '7.2.8';
 export const reactTestRendererVersion = '18.0.0';
 
-export const eslintPluginImportVersion = '2.25.4';
+export const eslintPluginImportVersion = '2.26.0';
 export const eslintPluginJsxA11yVersion = '6.5.1';
 export const eslintPluginReactVersion = '7.29.4';
 export const eslintPluginReactHooksVersion = '4.4.0';