feat(react): upgrade react-router-dom to 6.11.2 and remove @types/rea…

…ct-router-dom

docs/shared/mental-model/large-tasks.json

@@ -27055,7 +27055,6 @@
               "npm:@types/prettier",
               "npm:@types/react",
               "npm:@types/react-dom",
-              "npm:@types/react-router-dom",
               "npm:@types/semver",
               "npm:@types/tar-stream",
               "npm:@types/tmp",

package.json

@@ -118,7 +118,6 @@
     "@types/prettier": "^2.6.2",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
-    "@types/react-router-dom": "5.1.7",
     "@types/semver": "^7.3.8",
     "@types/tar-stream": "^2.2.2",
     "@types/tmp": "^0.2.0",
@@ -230,7 +229,7 @@
     "raw-loader": "^4.0.2",
     "react-redux": "8.0.5",
     "react-refresh": "^0.10.0",
-    "react-router-dom": "6.4.3",
+    "react-router-dom": "^6.11.2",
     "regenerator-runtime": "0.13.7",
     "resolve.exports": "1.1.0",
     "rollup": "^2.56.2",

packages/react/migrations.json

@@ -95,6 +95,12 @@
       "version": "16.2.0-beta.0",
       "description": "Remove react-test-renderer from package.json",
       "implementation": "./src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package"
+    },
+    "remove-types-react-router-dom": {
+      "cli": "nx",
+      "version": "16.3.0-beta.2",
+      "description": "Remove @types/react-router-dom from package.json",
+      "implementation": "./src/migrations/update-16-3-0/remove-types-react-router-dom-package"
     }
   },
   "packageJsonUpdates": {
@@ -799,8 +805,8 @@
         }
       }
     },
-    "5.8.0": {
-      "version": "5.8.0-beta.0",
+    "15.8.0": {
+      "version": "15.8.0-beta.0",
       "packages": {
         "@types/react": {
           "version": "18.0.28",
@@ -871,6 +877,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.3.0": {
+      "version": "16.3.0-beta.2",
+      "packages": {
+        "react-router-dom": {
+          "version": "6.11.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/react/src/generators/application/lib/add-routing.ts

@@ -1,9 +1,6 @@
 import { addInitialRoutes } from '../../../utils/ast-utils';
 import { NormalizedSchema } from '../schema';
-import {
-  reactRouterDomVersion,
-  typesReactRouterDomVersion,
-} from '../../../utils/versions';
+import { reactRouterDomVersion } from '../../../utils/versions';
 import {
   joinPathFragments,
   Tree,
@@ -44,7 +41,7 @@ export function addRouting(host: Tree, options: NormalizedSchema) {
     return addDependenciesToPackageJson(
       host,
       { 'react-router-dom': reactRouterDomVersion },
-      { '@types/react-router-dom': typesReactRouterDomVersion }
+      {}
     );
   }
 

packages/react/src/generators/component/component.ts

@@ -18,10 +18,7 @@ import { addStyledModuleDependencies } from '../../rules/add-styled-dependencies
 import { assertValidStyle } from '../../utils/assertion';
 import { addImport } from '../../utils/ast-utils';
 import { getInSourceVitestTestsTemplate } from '../../utils/get-in-source-vitest-tests-template';
-import {
-  reactRouterDomVersion,
-  typesReactRouterDomVersion,
-} from '../../utils/versions';
+import { reactRouterDomVersion } from '../../utils/versions';
 import { getComponentTests } from './get-component-tests';
 import { NormalizedSchema } from './noramlized-schema';
 import { Schema } from './schema';
@@ -42,7 +39,7 @@ export async function componentGenerator(host: Tree, schema: Schema) {
     const routingTask = addDependenciesToPackageJson(
       host,
       { 'react-router-dom': reactRouterDomVersion },
-      { '@types/react-router-dom': typesReactRouterDomVersion }
+      {}
     );
     tasks.push(routingTask);
   }

packages/react/src/generators/library/lib/update-app-routes.ts

@@ -15,10 +15,7 @@ import {
 } from '../../../utils/ast-utils';
 import { addInitialRoutes } from '../../../utils/ast-utils';
 import { maybeJs } from './maybe-js';
-import {
-  reactRouterDomVersion,
-  typesReactRouterDomVersion,
-} from '../../../utils/versions';
+import { reactRouterDomVersion } from '../../../utils/versions';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
 
@@ -46,8 +43,10 @@ export function updateAppRoutes(host: Tree, options: NormalizedSchema) {
 
   const routerTask = addDependenciesToPackageJson(
     host,
-    { 'react-router-dom': reactRouterDomVersion },
-    { '@types/react-router-dom': typesReactRouterDomVersion }
+    {
+      'react-router-dom': reactRouterDomVersion,
+    },
+    {}
   );
 
   // addBrowserRouterToMain

packages/react/src/migrations/update-16-3-0/remove-types-react-router-dom-package.spec.ts

@@ -0,0 +1,23 @@
+import { Tree, readJson, updateJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports';
+import removePackage from './remove-types-react-router-dom-package';
+
+describe('update-16-3-0-remove-types-react-router-dom-package', () => {
+  let tree: Tree;
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+
+    updateJson(tree, 'package.json', (json) => {
+      json.devDependencies['@types/react-router-dom'] = '*';
+      return json;
+    });
+  });
+
+  it('should remove react-test-renderer from package.json', async () => {
+    await removePackage(tree);
+
+    expect(
+      readJson(tree, 'package.json').devDependencies['react-test-renderer']
+    ).not.toBeDefined();
+  });
+});

packages/react/src/migrations/update-16-3-0/remove-types-react-router-dom-package.ts

@@ -0,0 +1,10 @@
+import {
+  Tree,
+  formatFiles,
+  removeDependenciesFromPackageJson,
+} from '@nx/devkit';
+
+export default async function removePackage(tree: Tree): Promise<void> {
+  removeDependenciesFromPackageJson(tree, [], ['react-test-renderer']);
+  await formatFiles(tree);
+}

packages/react/src/utils/versions.ts

@@ -26,8 +26,7 @@ export const emotionBabelPlugin = '11.10.6';
 // WARNING: This needs to be in sync with Next.js' dependency or else there might be issues.
 export const styledJsxVersion = '5.1.2';
 
-export const reactRouterDomVersion = '6.8.1';
-export const typesReactRouterDomVersion = '5.3.3';
+export const reactRouterDomVersion = '6.11.2';
 
 export const testingLibraryReactVersion = '14.0.0';