bugfix(react): not update tsconfig node apps (#19466)

nrwl · Oct 5, 2023 · fc76d6f · fc76d6f
1 parent 466dba0
commit fc76d6f
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 20 deletions.
diff --git a/packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.spec.ts b/packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.spec.ts
@@ -24,8 +24,19 @@ describe('Add typings to react projects', () => {
         build: {
           executor: '@nx/webpack:webpack',
         },
+        serve: {
+          executor: '@nx/webpack:dev-server',
+        },
       },
     });
+    tree.write(
+      'myapp/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          jsx: 'react-jsx',
+        },
+      })
+    );
     tree.write(
       'myapp/tsconfig.app.json',
       JSON.stringify({
@@ -45,4 +56,46 @@ describe('Add typings to react projects', () => {
       '@nx/react/typings/image.d.ts'
     );
   });
+
+  it('should not update tsconfig of node app to include react typings', async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: {},
+        devDependencies: {},
+      })
+    );
+
+    addProjectConfiguration(tree, 'myapp', {
+      root: 'myapp',
+      targets: {
+        build: {
+          executor: '@nx/webpack:webpack',
+        },
+        serve: {
+          executor: '@nx/js:node',
+        },
+      },
+    });
+    tree.write(
+      'myapp/tsconfig.app.json',
+      JSON.stringify({
+        compilerOptions: {
+          types: [],
+        },
+      })
+    );
+
+    await addTypings(tree);
+    const tsconfigTypes = JSON.parse(
+      tree.read('myapp/tsconfig.app.json', 'utf-8')
+    );
+
+    expect(tsconfigTypes.compilerOptions.types).not.toContain(
+      '@nx/react/typings/cssmodule.d.ts'
+    );
+    expect(tsconfigTypes.compilerOptions.types).not.toContain(
+      '@nx/react/typings/image.d.ts'
+    );
+  });
 });
diff --git a/packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.ts b/packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.ts
@@ -3,6 +3,7 @@ import {
   formatFiles,
   getProjects,
   joinPathFragments,
+  readJson,
   updateJson,
 } from '@nx/devkit';
 
@@ -13,6 +14,11 @@ export default async function addTypings(tree: Tree) {
     '@nx/vite:build',
     '@nx/rspack:rspack',
   ];
+  const serveExecutors = [
+    '@nx/webpack:dev-server',
+    '@nx/vite:dev-server',
+    '@nx/rspack:dev-server',
+  ];
   const relatedTsConfigs = [
     'tsconfig.app.json',
     'tsconfig.lib.json',
@@ -25,27 +31,39 @@ export default async function addTypings(tree: Tree) {
   ];
 
   for (const [, config] of projects) {
-    if (buildExecutors.includes(config?.targets?.build?.executor)) {
-      const rootPath = config.root;
-      relatedTsConfigs.forEach((tsConfig) => {
-        const tsConfigPath = joinPathFragments(rootPath, tsConfig);
-        if (tree.exists(tsConfigPath)) {
-          updateJson(tree, tsConfigPath, (json) => {
-            const compilerOptions = json.compilerOptions || {};
-            compilerOptions.types = [
-              ...new Set([...(compilerOptions.types || []), ...typesToAdd]),
-            ];
-            if (json.files?.length > 0) {
-              json.files = json.files.filter(
-                (file: string) =>
-                  !['cssmodule.d.ts', 'image.d.ts'].includes(file)
-              );
-            }
-            return { ...json, compilerOptions };
-          });
-        }
-      });
+    if (!buildExecutors.includes(config?.targets?.build?.executor)) {
+      continue;
+    }
+    if (
+      config?.targets?.serve?.executor &&
+      !serveExecutors.includes(config?.targets?.serve?.executor)
+    ) {
+      continue;
     }
+    const rootPath = config.root;
+    const projectTsConfigPath = joinPathFragments(rootPath, 'tsconfig.json');
+    const projectTsConfig = readJson(tree, projectTsConfigPath);
+    if (projectTsConfig.compilerOptions?.jsx !== 'react-jsx') {
+      continue;
+    }
+
+    relatedTsConfigs.forEach((tsConfig) => {
+      const tsConfigPath = joinPathFragments(rootPath, tsConfig);
+      if (tree.exists(tsConfigPath)) {
+        updateJson(tree, tsConfigPath, (json) => {
+          const compilerOptions = json.compilerOptions || {};
+          compilerOptions.types = [
+            ...new Set([...(compilerOptions.types || []), ...typesToAdd]),
+          ];
+          if (json.files?.length > 0) {
+            json.files = json.files.filter(
+              (file: string) => !['cssmodule.d.ts', 'image.d.ts'].includes(file)
+            );
+          }
+          return { ...json, compilerOptions };
+        });
+      }
+    });
   }
   await formatFiles(tree);
 }