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

【问题标题】：'React' refers to a UMD global, but the current file is a module'React' 指的是一个 UMD 全局，但当前文件是一个模块
【发布时间】：2021-02-15 17:31:28
【问题描述】：

我更新了我的项目以创建 React 应用程序 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;

【问题讨论】：

“我知道有了这个新版本，你不必从 'react' 重复导入 React”——你能详细说明一下吗？我不确定这些信息来自哪里。
在以前的版本中，每个包含 jsx 的文件都需要一个 import 语句才能做出反应。由于新的 jsx 转换，您不再需要它：github.com/facebook/create-react-app/pull/9645。
可以，但必须确保实际使用了新的 jsx 转换。对于当前的 babel-loader，它可以作为选择加入，但没有设置为默认值。

标签： javascript reactjs typescript create-react-app

【解决方案1】：

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

TypeScript v4.1 Beta - React 17 JSX Factories

【讨论】：

你好，既然 TypeScript 4.1 已经发布了，你是如何让它工作的？是"jsx": "react-jsx" 选项吗？
@SenTisso 没错。如果您使用的是 VSCode，请确保选择正确的 TypeScript 版本。 Link

【解决方案2】：

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

typescript 版本至少为 4.1 版
react 和 react-dom 至少版本 17
tsconfig.json 必须有一个 jsx 编译器选项 react-jsx 或 react-jsxdev

示例：

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

可以找到支持 React 17 JSX 工厂的 TypeScript 文档here

【讨论】：

我有这个配置，在创建组件时我不需要 React 导入，但我必须添加它才能通过测试。我在开玩笑地使用 RTL。
如果您已经完成了所有这些操作但仍然出现错误，请尝试关闭并重新打开 vscode。
如果使用 Next 则不起作用。 Next 在运行npm run dev 时覆盖jsx 选项。
VS 2019 似乎也不太喜欢这个（“找不到模块react/jsx-runtime”）。也许是因为我没有以npx create-react-app开头？现在，坚持使用旧的import React from 'react' 方式。

【解决方案3】：

添加

import React from 'react'

解决了这个问题

【讨论】：

新的 JSX 不需要 React 的导入：docs