Babel 自动反应运行时无法正常工作。仍然出现 Uncaught ReferenceError: React is not Defined

Question

根据新版本的 React，我们不应该总是

import React from 'react'

但我还是有错误

Uncaught ReferenceError: React is not defined

.babelrc（切换预设顺序没有帮助，还删除了一些预设）

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/env",
    "@babel/preset-typescript"
  ]
}

包装.json

    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^4.6.3",
    "@babel/core": "^7.17.8",
    "@babel/node": "^7.16.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "babel-loader": "^8.2.4",

Answer 1

将“.babelrc”文件重命名为“.config.babel.js”

然后在这个文件中：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    ['@babel/preset-react', {runtime: 'automatic'}],
  ],
};

使用此文件格式使您可以轻松忽略使用“package.json”文件内的属性“transformIgnorePatterns”转换的文件。

我个人在测试 React 应用程序时将它与玩笑一起使用，以防止一些包像这样被转译：

  "jest": {
    // [...]
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!react-bootstrap|bootstrap)"
    ]
    // [...]
  }

希望它能帮助一些人。

Answer 2

对于像我这样愚蠢的人来说，Babel 默默地忽略了我的 babel 配置文件，因为

package.json

文件中已经存在配置。我猜，请确保您只有一个配置源。