NX项目中*.spec.tsx文件出现React UMD全局错误求助

以下是针对该问题的具体解决步骤：

1. 统一TypeScript配置中的JSX模式 #

确保项目的TS配置文件（根目录tsconfig.json以及应用/库目录下的tsconfig.spec.json）正确配置React自动运行时的JSX模式：

• 打开根目录tsconfig.json，在compilerOptions中设置：

  "compilerOptions": {
    "jsx": "react-jsx"
  }
  

• 打开tsconfig.spec.json，确保它继承主配置的JSX设置，或者直接指定：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "jsx": "react-jsx"
    },
    "include": ["**/*.spec.tsx", "**/*.test.tsx"]
  }
  

这个配置告诉TypeScript服务，当前使用React自动运行时，无需手动导入React。

2. 对齐Jest与Babel的配置关联 #

在NX项目中，确保Jest正确识别你的Babel配置，避免VSCode的TS服务与Jest的处理逻辑不一致：

• 打开项目的project.json，找到test目标的options，明确指定Babel配置路径：

  "targets": {
    "test": {
      "executor": "@nrwl/jest:jest",
      "options": {
        "babelConfig": ".babelrc",
        "jestConfig": "jest.config.ts"
      }
    }
  }
  

• 在jest.config.ts中，配置ts-jest使用正确的TS和Babel配置：

  export default {
    globals: {
      'ts-jest': {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        babelConfig: true
      }
    }
  };
  

3. 让VSCode使用项目本地的TypeScript版本 #

VSCode内置的TS版本可能与项目依赖的TS版本不一致，导致无法识别react-jsx模式：

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Select TypeScript Version，选择Use Workspace Version。

4. 关闭ESLint中冗余的React导入检查（如果启用ESLint） #

如果项目使用ESLint，关闭强制导入React的规则，避免额外提示：

• 在.eslintrc.json中添加规则：

  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
  

5. 清除VSCode缓存并重启 #

VSCode的缓存可能导致配置不生效：

• 按下Ctrl+Shift+P，输入Developer: Reload Window重启窗口；
• 若问题仍存在，删除项目根目录下的.vscode/.tscache目录（如果存在）。

内容的提问来源于stack exchange，提问作者Neil Gaetano Lindberg