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

我更新了我的 React 项目，创建了 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;
125037 次浏览
小开
最佳答案

此错误消息来自 TypeScript 编译器。React 17新的 jsx 转换目前不受类型脚本4.0的支持，将在4.1中得到支持。

TypeScript v4.1 Beta-React 17 JSX Factory

小开

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

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

例如:

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

可以找到支持 React 17 JSX Factory 的 TypeScript 文档 给你

小开

添加

import React from 'react'

解决了这个问题

小开

我碰到了这个问题，最终意识到如果设置了 ts-jest，更改 tsconfig.json 是不起作用的。确保你的玩笑设置为:

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

Dan 写的是正确的，你可以改变 TS config.json:

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

或者只是在文件 Component 中导入 React，它会给出错误:

import React from 'react'
小开

对我来说，跟这些都没关系。

我使用的是 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

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

小开

当文件位于项目的根目录而不是使用 CreateReact App 的 src 文件夹时，就会发生这种情况。

小开

我在这里的问题是与 TypeScript 相关和类似的，但并不完全相同，因为这些解决方案已经在这里发表。

怎么了

我添加了嵌套的目录与源代码不是 包括d 在我的 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 项目:

{
"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 生成的

小开

根据项目中使用的版本，这可能是所需的格式:

import * as React from "react"

提交答案