Release 13.10.2

when trying to add cypress to a project that does not contain targets the project will error
out because of a null reference.
Now when trying to add to a project without a serve target a more
descriptive message is logged stating to add a serve target or use the --baseUrl flag
Note: a future
update should add the parameter to override what target to use if so desired.

ISSUES CLOSED: #9756

docs/generated/packages/js.json

@@ -128,6 +128,24 @@
       "hidden": false,
       "path": "/packages/js/src/generators/library/schema.json"
     },
+    {
+      "name": "init",
+      "factory": "./src/generators/init/init#initGenerator",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "$id": "NxTypescriptInit",
+        "cli": "nx",
+        "title": "Init nrwl/js",
+        "description": "Init generator placeholder for nrwl/js",
+        "presets": []
+      },
+      "aliases": ["lib"],
+      "x-type": "init",
+      "description": "Init placeholder.",
+      "implementation": "/packages/js/src/generators/init/init#initGenerator.ts",
+      "hidden": false,
+      "path": "/packages/js/src/generators/init/schema.json"
+    },
     {
       "name": "convert-to-swc",
       "factory": "./src/generators/convert-to-swc/convert-to-swc#convertToSwcGenerator",

docs/packages.json

@@ -109,7 +109,7 @@
     "path": "generated/packages/js.json",
     "schemas": {
       "executors": ["tsc", "swc"],
-      "generators": ["library", "convert-to-swc"]
+      "generators": ["library", "init", "convert-to-swc"]
     }
   },
   {

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)}`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nrwl/nx-source",
-  "version": "13.10.0",
+  "version": "13.10.2",
   "description": "Smart, Fast and Extensible Build System",
   "homepage": "https://nx.dev",
   "private": true,
@@ -306,4 +306,4 @@
     "immer": "~9.0.6",
     "minimist": "^1.2.6"
   }
-}
+}

packages/angular/src/generators/setup-mfe/lib/add-implicit-deps.ts

@@ -1,23 +0,0 @@
-import type { Tree } from '@nrwl/devkit';
-import type { Schema } from '../schema';
-
-import {
-  readProjectConfiguration,
-  updateProjectConfiguration,
-} from '@nrwl/devkit';
-
-export function addImplicitDeps(host: Tree, options: Schema) {
-  if (
-    options.mfeType === 'host' &&
-    Array.isArray(options.remotes) &&
-    options.remotes.length > 0
-  ) {
-    const appConfig = readProjectConfiguration(host, options.appName);
-    appConfig.implicitDependencies = Array.isArray(
-      appConfig.implicitDependencies
-    )
-      ? [...appConfig.implicitDependencies, ...options.remotes]
-      : [...options.remotes];
-    updateProjectConfiguration(host, options.appName, appConfig);
-  }
-}

packages/angular/src/generators/setup-mfe/lib/index.ts

@@ -1,6 +1,5 @@
 export * from './add-cypress-workaround';
 export * from './add-entry-module';
-export * from './add-implicit-deps';
 export * from './add-remote-to-host';
 export * from './change-build-target';
 export * from './fix-bootstrap';

packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts

@@ -135,22 +135,6 @@ describe('Init MFE', () => {
 
     expect(mfeConfigContents).toContain(`'remote1'`);
   });
-  it('should update the implicit dependencies of the host when --remotes flag supplied', async () => {
-    // ACT
-    await setupMfe(tree, {
-      appName: 'app1',
-      mfeType: 'host',
-      remotes: ['remote1'],
-    });
-
-    // ASSERT
-    const projectConfig: ProjectConfiguration = readProjectConfiguration(
-      tree,
-      'app1'
-    );
-
-    expect(projectConfig.implicitDependencies).toContain('remote1');
-  });
 
   it('should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it', async () => {
     // ARRANGE

packages/angular/src/generators/setup-mfe/setup-mfe.ts

@@ -6,7 +6,6 @@ import { readProjectConfiguration, formatFiles } from '@nrwl/devkit';
 import {
   addCypressOnErrorWorkaround,
   addEntryModule,
-  addImplicitDeps,
   addRemoteToHost,
   changeBuildTarget,
   fixBootstrap,
@@ -30,7 +29,6 @@ export async function setupMfe(tree: Tree, options: Schema) {
   generateWebpackConfig(tree, options, projectConfig.root, remotesWithPorts);
 
   addEntryModule(tree, options, projectConfig.root);
-  addImplicitDeps(tree, options);
   changeBuildTarget(tree, options);
   updateTsConfigTarget(tree, options);
   setupServeTarget(tree, options);

packages/angular/src/generators/utils/storybook.ts

@@ -41,11 +41,15 @@ export function getComponentProps(
   const props = getInputPropertyDeclarations(tree, componentPath).map(
     (node) => {
       const decoratorContent = findNodes(
-        findNodes(node, SyntaxKind.Decorator)[0],
+        findNodes(node, SyntaxKind.Decorator).find((n) =>
+          n.getText().startsWith('@Input')
+        ),
         SyntaxKind.StringLiteral
       );
       const name = decoratorContent.length
-        ? decoratorContent[0].getText().slice(1, -1)
+        ? !decoratorContent[0].getText().includes('.')
+          ? decoratorContent[0].getText().slice(1, -1)
+          : node.name.getText()
         : node.name.getText();
 
       const type = getKnobType(node);

packages/cypress/src/generators/cypress-project/cypress-project.spec.ts

@@ -413,6 +413,23 @@ describe('schematic:cypress-project', () => {
           expect(projectConfig.tags).toEqual([]);
         });
       });
+
+      it('should not throw an error when --project does not have targets', async () => {
+        const projectConf = readProjectConfiguration(tree, 'my-app');
+        delete projectConf.targets;
+
+        updateProjectConfiguration(tree, 'my-app', projectConf);
+        await cypressProjectGenerator(tree, {
+          name: 'my-app-e2e',
+          project: 'my-app',
+          linter: Linter.EsLint,
+        });
+
+        const projectConfig = readProjectConfiguration(tree, 'my-app-e2e');
+        expect(projectConfig.targets['e2e'].options.devServerTarget).toEqual(
+          'my-app:serve'
+        );
+      });
     });
 
     describe('--linter', () => {

packages/cypress/src/generators/cypress-project/cypress-project.ts

@@ -13,6 +13,8 @@ import {
   Tree,
   updateJson,
   ProjectConfiguration,
+  stripIndents,
+  logger,
 } from '@nrwl/devkit';
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
@@ -82,8 +84,15 @@ function addProject(tree: Tree, options: CypressProjectSchema) {
     };
   } else if (options.project) {
     const project = readProjectConfiguration(tree, options.project);
+
+    if (!project.targets) {
+      logger.warn(stripIndents`
+      NOTE: Project, "${options.project}", does not have any targets defined and a baseUrl was not provided. Nx will use  
+      "${options.project}:serve" as the devServerTarget. But you may need to define this target within the project, "${options.project}".
+      `);
+    }
     const devServerTarget =
-      project.targets.serve && project.targets.serve.defaultConfiguration
+      project.targets?.serve && project.targets?.serve?.defaultConfiguration
         ? `${options.project}:serve:${project.targets.serve.defaultConfiguration}`
         : `${options.project}:serve`;
     e2eProjectConfig = {

packages/cypress/src/generators/init/init.ts

@@ -1,20 +1,15 @@
 import {
   addDependenciesToPackageJson,
   convertNxGenerator,
+  removeDependenciesFromPackageJson,
   Tree,
-  updateJson,
 } from '@nrwl/devkit';
-
 import { cypressVersion, nxVersion } from '../../utils/versions';
 import { Schema } from './schema';
 
 function updateDependencies(host: Tree) {
-  updateJson(host, 'package.json', (json) => {
-    json.dependencies = json.dependencies || {};
-    delete json.dependencies['@nrwl/cypress'];
+  removeDependenciesFromPackageJson(host, ['@nrwl/cypress'], []);
 
-    return json;
-  });
   return addDependenciesToPackageJson(
     host,
     {},

packages/express/src/generators/init/init.ts

@@ -1,12 +1,12 @@
 import {
   addDependenciesToPackageJson,
-  updateJson,
-  formatFiles,
   convertNxGenerator,
+  formatFiles,
+  removeDependenciesFromPackageJson,
   Tree,
 } from '@nrwl/devkit';
-import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
 import { initGenerator as nodeInitGenerator } from '@nrwl/node';
+import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
 import {
   expressTypingsVersion,
   expressVersion,
@@ -15,10 +15,8 @@ import {
 import type { Schema } from './schema';
 
 function updateDependencies(tree: Tree) {
-  updateJson(tree, 'package.json', (json) => {
-    delete json.dependencies['@nrwl/express'];
-    return json;
-  });
+  removeDependenciesFromPackageJson(tree, ['@nrwl/express'], []);
+
   return addDependenciesToPackageJson(
     tree,
     {

packages/jest/src/generators/init/init.ts

@@ -2,6 +2,7 @@ import {
   addDependenciesToPackageJson,
   convertNxGenerator,
   GeneratorCallback,
+  removeDependenciesFromPackageJson,
   stripIndents,
   Tree,
   updateJson,
@@ -23,16 +24,6 @@ const schemaDefaults = {
   compiler: 'tsc',
 } as const;
 
-function removeNrwlJestFromDeps(host: Tree) {
-  updateJson(host, 'package.json', (json) => {
-    // check whether updating the package.json is necessary
-    if (json.dependencies && json.dependencies['@nrwl/jest']) {
-      delete json.dependencies['@nrwl/jest'];
-    }
-    return json;
-  });
-}
-
 function createJestConfig(host: Tree) {
   if (!host.exists('jest.config.js')) {
     host.write(
@@ -103,8 +94,8 @@ export function jestInitGenerator(tree: Tree, schema: JestInitSchema) {
 
   let installTask: GeneratorCallback = () => {};
   if (!options.skipPackageJson) {
+    removeDependenciesFromPackageJson(tree, ['@nrwl/jest'], []);
     installTask = updateDependencies(tree, options);
-    removeNrwlJestFromDeps(tree);
   }
 
   updateExtensions(tree);

packages/js/generators.json

@@ -9,6 +9,13 @@
       "x-type": "library",
       "description": "Create a library."
     },
+    "init": {
+      "factory": "./src/generators/init/init#initSchematic",
+      "schema": "./src/generators/init/schema.json",
+      "aliases": ["lib"],
+      "x-type": "init",
+      "description": "Init placeholder."
+    },
     "convert-to-swc": {
       "factory": "./src/generators/convert-to-swc/convert-to-swc#convertToSwcSchematic",
       "schema": "./src/generators/convert-to-swc/schema.json",
@@ -25,6 +32,13 @@
       "x-type": "library",
       "description": "Create a library"
     },
+    "init": {
+      "factory": "./src/generators/init/init#initGenerator",
+      "schema": "./src/generators/init/schema.json",
+      "aliases": ["lib"],
+      "x-type": "init",
+      "description": "Init placeholder."
+    },
     "convert-to-swc": {
       "factory": "./src/generators/convert-to-swc/convert-to-swc#convertToSwcGenerator",
       "schema": "./src/generators/convert-to-swc/schema.json",

packages/js/migrations.json

@@ -11,6 +11,12 @@
       "version": "13.8.5-beta.1",
       "description": "Adjust .swcrc to .lib.swcrc",
       "factory": "./src/migrations/update-13-8-5/update-swcrc"
+    },
+    "update-swcrc-exclude": {
+      "cli": "nx",
+      "version": "13.10.1-beta.1",
+      "description": "Update .lib.swcrc to exclude missing test files",
+      "factory": "./src/migrations/update-13-10-1/update-lib-swcrc-exclude"
     }
   },
   "packageJsonUpdates": {}

packages/js/src/generators/init/init.ts

@@ -0,0 +1,10 @@
+import { convertNxGenerator, logger } from '@nrwl/devkit';
+
+export async function initGenerator() {
+  logger.info(
+    'This is a placeholder for @nrwl/js:init generator. If you want to create a library, use @nrwl/js:lib instead'
+  );
+}
+
+export default initGenerator;
+export const initSchematic = convertNxGenerator(initGenerator);

packages/js/src/generators/init/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NxTypescriptInit",
+  "cli": "nx",
+  "title": "Init nrwl/js",
+  "description": "Init generator placeholder for nrwl/js"
+}

packages/js/src/migrations/update-13-10-1/__snapshots__/update-lib-swcrc-exclude.spec.ts.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Update .lib.swcrc exclude should update the exclude pattern 1`] = `
+"{
+  \\"jsc\\": {
+    \\"target\\": \\"es2017\\",
+    \\"parser\\": {
+      \\"syntax\\": \\"typescript\\",
+      \\"decorators\\": true,
+      \\"dynamicImport\\": true
+    },
+    \\"transform\\": {
+      \\"decoratorMetadata\\": true,
+      \\"legacyDecorator\\": true
+    },
+    \\"keepClassNames\\": true,
+    \\"externalHelpers\\": true,
+    \\"loose\\": true
+  },
+  \\"module\\": {
+    \\"type\\": \\"commonjs\\",
+    \\"strict\\": true,
+    \\"noInterop\\": true
+  },
+  \\"sourceMaps\\": true,
+  \\"exclude\\": [
+    \\".*.spec.tsx?$\\",
+    \\".*.test.tsx?$\\",
+    \\"./src/jest-setup.ts$\\",
+    \\"./**/jest-setup.ts$\\",
+    \\".*.js$\\"
+  ]
+}
+"
+`;

packages/js/src/migrations/update-13-10-1/update-lib-swcrc-exclude.spec.ts

@@ -0,0 +1,90 @@
+import {
+  addProjectConfiguration,
+  ProjectConfiguration,
+  readJson,
+  Tree,
+  updateJson,
+} from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import updateSwcRcExclude from './update-lib-swcrc-exclude';
+
+const projectConfig: ProjectConfiguration = {
+  root: 'libs/swc-lib',
+  sourceRoot: 'libs/swc-lib/src',
+  targets: {
+    build: {
+      executor: '@nrwl/js:swc',
+      outputs: ['{options.outputPath}'],
+      options: {
+        outputPath: 'dist/libs/swc-lib',
+        main: 'libs/swc-lib/src/index.ts',
+        tsConfig: 'libs/swc-lib/tsconfig.lib.json',
+        assets: ['libs/swc-lib/*.md'],
+      },
+    },
+  },
+};
+const oldSwcRc = {
+  jsc: {
+    target: 'es2017',
+    parser: {
+      syntax: 'typescript',
+      decorators: true,
+      dynamicImport: true,
+    },
+    transform: {
+      decoratorMetadata: true,
+      legacyDecorator: true,
+    },
+    keepClassNames: true,
+    externalHelpers: true,
+    loose: true,
+  },
+  module: {
+    type: 'commonjs',
+    strict: true,
+    noInterop: true,
+  },
+  sourceMaps: true,
+  exclude: [
+    './src/**/.*.spec.ts$',
+    './**/.*.spec.ts$',
+    './src/**/jest-setup.ts$',
+    './**/jest-setup.ts$',
+    './**/.*.js$',
+  ],
+};
+describe('Update .lib.swcrc exclude', () => {
+  let tree: Tree;
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+    addProjectConfiguration(tree, 'swc-lib', projectConfig);
+
+    tree.write('libs/swc-lib/.lib.swcrc', JSON.stringify(oldSwcRc));
+  });
+
+  it('should update the exclude pattern', () => {
+    updateSwcRcExclude(tree);
+    expect(tree.read('libs/swc-lib/.lib.swcrc', 'utf-8')).toMatchSnapshot();
+  });
+
+  it('should NOT update the exclude pattern if not present', () => {
+    updateJson(tree, 'libs/swc-lib/.lib.swcrc', (json) => {
+      delete json.exclude;
+      return json;
+    });
+
+    const before = readJson(tree, 'libs/swc-lib/.lib.swcrc');
+    updateSwcRcExclude(tree);
+    const after = readJson(tree, 'libs/swc-lib/.lib.swcrc');
+
+    expect(after.exclude).toBeFalsy();
+    expect(after).toEqual(before);
+  });
+
+  it('should do nothing if .lib.swcrc doest not exist', () => {
+    tree.delete('libs/swc-lib/.lib-swcrc');
+
+    expect(() => updateSwcRcExclude(tree)).not.toThrowError();
+  });
+});

packages/js/src/migrations/update-13-10-1/update-lib-swcrc-exclude.ts

@@ -0,0 +1,41 @@
+import { readProjectConfiguration, Tree, updateJson } from '@nrwl/devkit';
+import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
+import { join } from 'path';
+import { SwcExecutorOptions } from '../../utils/schema';
+import { defaultExclude } from '../../utils/swc/add-swc-config';
+
+export default function updateSwcRcExclude(tree: Tree) {
+  forEachExecutorOptions(
+    tree,
+    '@nrwl/js:swc',
+    (config: SwcExecutorOptions, projectName) => {
+      const projectConfig = readProjectConfiguration(tree, projectName);
+      const libSwcPath = join(projectConfig.root, '.lib.swcrc');
+
+      if (!tree.exists(libSwcPath)) return;
+
+      updateJson(
+        tree,
+        libSwcPath,
+        (json) => {
+          if (json.exclude) {
+            const excludePatterns = new Set([
+              ...defaultExclude,
+              ...json.exclude,
+            ]);
+            // remove old patterns that are duplicate for new patterns
+            // defined in defaultExclude
+            excludePatterns.delete('./**/.*.spec.ts$');
+            excludePatterns.delete('./src/**/.*.spec.ts$');
+            excludePatterns.delete('./**/.*.js$');
+            excludePatterns.delete('./src/**/jest-setup.ts$');
+
+            json.exclude = [...excludePatterns];
+          }
+          return json;
+        },
+        { expectComments: true }
+      );
+    }
+  );
+}

packages/js/src/utils/swc/add-swc-config.ts

@@ -4,11 +4,11 @@ import { Tree } from '@nrwl/devkit';
 import { join } from 'path';
 
 export const defaultExclude = [
-  './src/**/.*.spec.ts$',
-  './**/.*.spec.ts$',
-  './src/**/jest-setup.ts$',
+  '.*.spec.tsx?$',
+  '.*.test.tsx?$',
+  './src/jest-setup.ts$',
   './**/jest-setup.ts$',
-  './**/.*.js$',
+  '.*.js$',
 ];
 
 const swcOptionsString = () => `{

packages/linter/src/generators/init/init.ts

@@ -1,5 +1,6 @@
 import {
   addDependenciesToPackageJson,
+  removeDependenciesFromPackageJson,
   updateJson,
   writeJson,
 } from '@nrwl/devkit';
@@ -169,13 +170,7 @@ function initEsLint(tree: Tree, options: LinterInitOptions): GeneratorCallback {
   }
 
   if (!options.skipPackageJson) {
-    updateJson(tree, 'package.json', (json) => {
-      json.dependencies ||= {};
-
-      delete json.dependencies['@nrwl/linter'];
-
-      return json;
-    });
+    removeDependenciesFromPackageJson(tree, ['@nrwl/linter'], []);
   }
 
   writeJson(tree, '.eslintrc.json', globalEsLintConfiguration);

packages/node/src/generators/init/init.spec.ts

@@ -3,6 +3,7 @@ import {
   NxJsonConfiguration,
   readJson,
   Tree,
+  updateJson,
 } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 
@@ -52,4 +53,15 @@ describe('init', () => {
     await initGenerator(tree, { unitTestRunner: 'none' });
     expect(tree.exists('jest.config.js')).toEqual(false);
   });
+
+  it('should not fail when dependencies is missing from package.json and no other init generators are invoked', async () => {
+    updateJson(tree, 'package.json', (json) => {
+      delete json.dependencies;
+      return json;
+    });
+
+    expect(
+      initGenerator(tree, { unitTestRunner: 'none' })
+    ).resolves.toBeTruthy();
+  });
 });

packages/node/src/generators/init/init.ts

@@ -3,19 +3,16 @@ import {
   convertNxGenerator,
   formatFiles,
   GeneratorCallback,
+  removeDependenciesFromPackageJson,
   Tree,
-  updateJson,
 } from '@nrwl/devkit';
+import { jestInitGenerator } from '@nrwl/jest';
+import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
 import { nxVersion, tslibVersion } from '../../utils/versions';
 import { Schema } from './schema';
-import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
-import { jestInitGenerator } from '@nrwl/jest';
 
 function updateDependencies(tree: Tree) {
-  updateJson(tree, 'package.json', (json) => {
-    delete json.dependencies['@nrwl/node'];
-    return json;
-  });
+  removeDependenciesFromPackageJson(tree, ['@nrwl/node'], []);
 
   return addDependenciesToPackageJson(
     tree,

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/generators/init/init.ts

@@ -1,28 +1,28 @@
-import { InitSchema } from './schema';
+import { cypressInitGenerator } from '@nrwl/cypress';
 import {
   addDependenciesToPackageJson,
   convertNxGenerator,
   GeneratorCallback,
   readWorkspaceConfiguration,
+  removeDependenciesFromPackageJson,
   Tree,
-  updateJson,
   updateWorkspaceConfiguration,
 } from '@nrwl/devkit';
 import { jestInitGenerator } from '@nrwl/jest';
-import { cypressInitGenerator } from '@nrwl/cypress';
 import { webInitGenerator } from '@nrwl/web';
-import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
+import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
 import {
   nxVersion,
   reactDomVersion,
+  reactTestRendererVersion,
   reactVersion,
+  testingLibraryReactHooksVersion,
   testingLibraryReactVersion,
   typesReactDomVersion,
   typesReactVersion,
-  testingLibraryReactHooksVersion,
-  reactTestRendererVersion,
 } from '../../utils/versions';
+import { InitSchema } from './schema';
 
 function setDefault(host: Tree) {
   const workspace = readWorkspaceConfiguration(host);
@@ -45,12 +45,7 @@ function setDefault(host: Tree) {
 }
 
 function updateDependencies(host: Tree) {
-  updateJson(host, 'package.json', (json) => {
-    if (json.dependencies && json.dependencies['@nrwl/react']) {
-      delete json.dependencies['@nrwl/react'];
-    }
-    return json;
-  });
+  removeDependenciesFromPackageJson(host, ['@nrwl/react'], []);
 
   return addDependenciesToPackageJson(
     host,

packages/react/src/migrations/update-13-10-0/update-13-10-0.ts

@@ -1,7 +1,7 @@
 import {
   addDependenciesToPackageJson,
-  readJson,
   logger,
+  readJson,
   Tree,
 } from '@nrwl/devkit';
 
@@ -24,9 +24,10 @@ export async function updateToReact18(host: Tree) {
         react: '18.0.0',
         'react-dom': '18.0.0',
         'react-is': '18.0.0',
-        'react-test-renderer': '18.0.0',
       },
-      {}
+      {
+        'react-test-renderer': '18.0.0',
+      }
     );
   }
 }

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,6 +43,7 @@ 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()) &&
@@ -50,6 +51,15 @@ export function findMainRenderStatement(
     ) {
       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,15 +3,15 @@ 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';
@@ -19,14 +19,14 @@ 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';

packages/web/src/generators/init/init.spec.ts

@@ -3,6 +3,7 @@ import {
   NxJsonConfiguration,
   readJson,
   Tree,
+  updateJson,
 } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 
@@ -79,5 +80,19 @@ describe('init', () => {
       });
       expect(tree.exists('babel.config.json')).toBe(false);
     });
+
+    it('should not fail when dependencies is missing from package.json and no other init generators are invoked', async () => {
+      updateJson(tree, 'package.json', (json) => {
+        delete json.dependencies;
+        return json;
+      });
+
+      expect(
+        webInitGenerator(tree, {
+          e2eTestRunner: 'none',
+          unitTestRunner: 'none',
+        })
+      ).resolves.toBeTruthy();
+    });
   });
 });

packages/web/src/generators/init/init.ts

@@ -1,24 +1,21 @@
+import { cypressInitGenerator } from '@nrwl/cypress';
 import {
   addDependenciesToPackageJson,
   convertNxGenerator,
   formatFiles,
   GeneratorCallback,
+  removeDependenciesFromPackageJson,
   Tree,
-  updateJson,
   writeJson,
 } from '@nrwl/devkit';
-import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
-import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
-import { Schema } from './schema';
-import { nxVersion } from '../../utils/versions';
-import { cypressInitGenerator } from '@nrwl/cypress';
 import { jestInitGenerator } from '@nrwl/jest';
+import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
+import { setDefaultCollection } from '@nrwl/workspace/src/utilities/set-default-collection';
+import { nxVersion } from '../../utils/versions';
+import { Schema } from './schema';
 
 function updateDependencies(tree: Tree) {
-  updateJson(tree, 'package.json', (json) => {
-    delete json.dependencies['@nrwl/web'];
-    return json;
-  });
+  removeDependenciesFromPackageJson(tree, ['@nrwl/web'], []);
 
   return addDependenciesToPackageJson(
     tree,

packages/workspace/src/migrations/update-13-10-0/update-tasks-runner.ts

@@ -9,9 +9,9 @@ export function updateTasksRunner(host: Tree) {
   if (
     config?.tasksRunnerOptions['default'] &&
     config?.tasksRunnerOptions['default'].runner ==
-      '@nrwl/workspace/tasks-runner/default'
+      '@nrwl/workspace/tasks-runners/default'
   ) {
-    config.tasksRunnerOptions['default'].runner = 'nx/tasks-runner/default';
+    config.tasksRunnerOptions['default'].runner = 'nx/tasks-runners/default';
   }
   updateWorkspaceConfiguration(host, config);
 }