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

Question

我更新了我的项目以创建 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;

Answer 1

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

TypeScript v4.1 Beta - React 17 JSX Factories

Answer 2

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

typescript 至少版本 4.1
react 和 react-dom 版本至少为 17
tsconfig.json 必须具有 jsx compilerOption react-jsx 或 react-jsxdev

示例：

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

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

Answer 3

正在添加

import React from 'react'

修复了这个问题

Answer 4

我运行解决了这个问题，最后意识到如果您设置了 ts-jest，则更改 tsconfig.json 不起作用。确保您是否将 ts-jest 设置为：

module.exports = {
  ...
  globals: {
    ...
    "ts-jest": {
      ...
      tsconfig: {
        ...
        jsx: "react-jsx", // *** HERE ***
        ...
      },
    },
  },
  ...
};

Answer 5

Dan写的是对的可以改TSconfig.json:

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

或者只是在给您错误的文件组件中导入 React：

import React from 'react'

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

'React' refers to a UMD global, but the current file is a module

javascript

typescript

reactjs

create-react-app