'React' 指的是一个 UMD 全局，但当前文件是一个模块

Question

我更新了我的项目以创建 react app 4.0，并且我正在放缓将我的文件移动到 TypeScript。我知道使用这个新版本，您不必重复从“react”导入 React。但是，在我未导入 React 的所有 TS 文件中，我收到此错误'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)。我知道我可以通过导入 React 来修复它，但我认为这不再需要了。另外，有人可以解释这个错误的含义吗？

我的基本 TSX 文件

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

Answer 1

添加

import React from 'react'

修复了这个问题

Answer 2

Create React App 在版本 4 中支持开箱即用的新 JSX 转换，但如果您使用自定义设置，则需要以下内容来消除在jsx不使用 的情况下编写时的 TypeScript 错误import React from 'react'：

• typescript 版本至少为 4.1 版
• react和react-dom至少版本 17
• tsconfig.json必须有一个jsxcompilerOptionreact-jsx或react-jsxdev

例子：

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

可以在此处找到支持 React 17 JSX 工厂的 TypeScript 文档

Answer 3

Dan 写的是正确的，你可以更改 TS config.json：

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

或者只需在文件 Component 中导入 React 就会出现错误：

import React from 'react'

Answer 4

我这里的问题与 TypeScript 相关并且相似，但不完全相同，因为那些解决方案已经在本文中发布了。

什么问题

我添加了带有源代码的嵌套目录，这些目录未包含在我的tsconfig.json.

解决方案

这是我修复它的方法，只需添加额外的路径.ts和.tsx路径即可，例如

// tsconfig.json
{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
    "<path-to-your-source>.ts",
    "<path-to-your-source>.tsx",
  ],
}

我的特定项目是 Next.js 项目。这是我的完整内容tsconfig.json：

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "esnext"
    ],
    "esModuleInterop": true,
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

上述绝大多数内容tsconfig.json是通过 Next.js 生成的

Answer 5

对于 macOS 上的 VSCode 用户，只需关闭并重新打开项目即可解决我的问题。

Answer 6

此错误消息来自 TypeScript 编译器。Typescript 4.0 目前不支持 React 17 新的 jsx 转换，4.1 将支持。

TypeScript v4.1 Beta - React 17 JSX 工厂

Answer 7

检查您的文件 tsconfig.json

"compilerOptions": {
    ...
    "baseUrl": "src",
    ...
    "jsx": "react-jsx",
    ...
 },

要在 VS Code 中重新加载打字稿服务器：

按 Ctrl+Shift+P（macOS 上为 Cmd+Shift+P）打开命令面板并键入 restart，然后选择命令“TypeScript：重新启动 TS 服务器”。

Answer 8

我用这个修复了它：

{
  ...
  "compilerOptions": {
     ...
    "jsx": "react",
    "allowUmdGlobalAccess": true,
  }
}

Answer 9

就我而言，这与这些无关。

我使用的是 Visual Studio Code，并且我打开的文件夹不是位于包含 tsconfig.json 文件的根目录，而是位于 src 文件夹内的一层。

我收到错误：Parsing error: Cannot read file :C\MyProject\tsconfig.json.eslint

从而间接造成了'React' refers to a UMD global, but the current file is a module

在项目级别重新打开文件夹解决了该问题。:\