fix(react): add typings to types instead of files (#18501)

packages/next/src/generators/library/library.spec.ts

@@ -29,17 +29,10 @@ describe('next library', () => {
       ...baseOptions,
       name: 'myLib',
     });
-    const tsconfigFiles = readJson(
+    const tsconfigTypes = readJson(appTree, 'libs/my-lib/tsconfig.lib.json')
-      appTree,
+      .compilerOptions.types;
-      'libs/my-lib/tsconfig.lib.json'
-    ).files;
 
-    expect(tsconfigFiles).toContain(
+    expect(tsconfigTypes).toContain('@nx/next/typings/image.d.ts');
-      '../../node_modules/@nx/next/typings/image.d.ts'
-    );
-    expect(tsconfigFiles).not.toContain(
-      '../../node_modules/@nx/react/typings/image.d.ts'
-    );
   });
 
   it('should add jsxImportSource in tsconfig.json for @emotion/styled', async () => {

packages/next/src/generators/library/library.ts

@@ -86,18 +86,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
     host,
     joinPathFragments(options.projectRoot, 'tsconfig.lib.json'),
     (json) => {
-      if (!json.files) {
-        json.files = [];
-      }
-      json.files = json.files.map((path: string) => {
-        if (path.endsWith('react/typings/image.d.ts')) {
-          return path.replace(
-            '@nx/react/typings/image.d.ts',
-            '@nx/next/typings/image.d.ts'
-          );
-        }
-        return path;
-      });
       if (!json.compilerOptions) {
         json.compilerOptions = {
           types: [],
@@ -106,7 +94,11 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
       if (!json.compilerOptions.types) {
         json.compilerOptions.types = [];
       }
-      json.compilerOptions.types.push('next');
+      json.compilerOptions.types = [
+        ...json.compilerOptions.types,
+        'next',
+        '@nx/next/typings/image.d.ts',
+      ];
       return json;
     }
   );

packages/react/migrations.json

@@ -107,6 +107,12 @@
       "version": "16.7.0-beta.2",
       "description": "Add @babel/core to package.json if @babel/preset-react is present",
       "implementation": "./src/migrations/update-16-7-0/add-babel-core"
+    },
+    "update-16-7-0-add-typings": {
+      "cli": "nx",
+      "version": "16.7.0-beta.2",
+      "description": "Add @nx/react types to tsconfig types array",
+      "implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
     }
   },
   "packageJsonUpdates": {

packages/react/src/generators/application/application.spec.ts

@@ -52,6 +52,8 @@ describe('app', () => {
       const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json');
       expect(tsconfigApp.compilerOptions.types).toEqual([
         'node',
+        '@nx/react/typings/cssmodule.d.ts',
+        '@nx/react/typings/image.d.ts',
         'vite/client',
       ]);
       const tsconfigSpec = readJson(appTree, 'apps/my-app/tsconfig.spec.json');

packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__

@@ -2,13 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+      ]
   },
-  "files": [
-    <% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
-  ],
   "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__

@@ -2,13 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+      ]
   },
-  "files": [
-    <% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
-  ],
   "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__

@@ -2,13 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
-    "types": ["node"]
+    "types": [
+      "node",
+      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+      ]
   },
-  "files": [
-    <% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
-    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
-  ],
   "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react/src/generators/application/lib/update-jest-config.ts

@@ -8,16 +8,15 @@ export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
   }
 
   updateJson(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
-    const offset = offsetFromRoot(options.appProjectRoot);
+    json.types = json.types || [];
-    json.files = [
-      `${offset}node_modules/@nx/react/typings/cssmodule.d.ts`,
-      `${offset}node_modules/@nx/react/typings/image.d.ts`,
-    ];
     if (options.style === 'styled-jsx') {
-      json.files.unshift(
+      json.types.push('@nx/react/typings/styled-jsx.d.ts');
-        `${offset}node_modules/@nx/react/typings/styled-jsx.d.ts`
-      );
     }
+    json.types = [
+      ...json.types,
+      '@nx/react/typings/cssmodule.d.ts',
+      '@nx/react/typings/image.d.ts',
+    ];
     return json;
   });
 

packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.spec.ts

@@ -0,0 +1,48 @@
+import { Tree, addProjectConfiguration } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports';
+import addTypings from './update-16-7-0-add-typings';
+
+describe('Add typings to react projects', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+  });
+
+  it('should update tsconfig to include react typings', async () => {
+    tree.write(
+      'package.json',
+      JSON.stringify({
+        dependencies: {},
+        devDependencies: {},
+      })
+    );
+
+    addProjectConfiguration(tree, 'myapp', {
+      root: 'myapp',
+      targets: {
+        build: {
+          executor: '@nx/webpack:webpack',
+        },
+      },
+    });
+    tree.write(
+      'myapp/tsconfig.app.json',
+      JSON.stringify({
+        compilerOptions: {},
+      })
+    );
+
+    await addTypings(tree);
+    const tsconfigTypes = JSON.parse(
+      tree.read('myapp/tsconfig.app.json', 'utf-8')
+    );
+
+    expect(tsconfigTypes.compilerOptions.types).toContain(
+      '@nx/react/typings/cssmodule.d.ts'
+    );
+    expect(tsconfigTypes.compilerOptions.types).toContain(
+      '@nx/react/typings/image.d.ts'
+    );
+  });
+});

packages/react/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.ts

@@ -0,0 +1,51 @@
+import {
+  Tree,
+  formatFiles,
+  getProjects,
+  joinPathFragments,
+  updateJson,
+} from '@nx/devkit';
+
+export default async function addTypings(tree: Tree) {
+  const projects = getProjects(tree);
+  const buildExecutors = [
+    '@nx/webpack:webpack',
+    '@nx/vite:build',
+    '@nx/rspack:rspack',
+  ];
+  const relatedTsConfigs = [
+    'tsconfig.app.json',
+    'tsconfig.lib.json',
+    'tsconfig.spec.json',
+  ];
+
+  const typesToAdd = [
+    '@nx/react/typings/cssmodule.d.ts',
+    '@nx/react/typings/image.d.ts',
+  ];
+
+  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 };
+          });
+        }
+      });
+    }
+  }
+  await formatFiles(tree);
+}