当前未启用对实验性“jsx”的支持

Question

所以我无休止地在网上搜索以解决这个问题。

"support for the experimental 'jsx' isn't currently enabled...
Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing."

所以我有很多（比如 100 个）这样的错误，所以我改变了我的 .babelrc 和 .babel.config.js 看起来像：

{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
    loader: 'babel-loader',
    options: {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',{
        'plugins': [
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
        ]}]
    }
}]}

和配置：

"presets": [
    "react",
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
  [
    "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
  ],
  [
    "@babel/plugin-transform-runtime",
    {
      "regenerator": true
    }
  ]
  ]

这解决了大多数这些错误。

但是，我一直看到 5 个文件的相同错误 -> 这 5 个文件与之前抛出完全相同错误的 100 个文件之间没有明显差异。

根据其他堆栈溢出答案和互联网的建议，我更改了我的 .babelrc 和 config.js：

{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
    loader: 'babel-loader',
    options: {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript',{
        'plugins': [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            "@babel/plugin-syntax-dynamic-import",
            "@babel/plugin-transform-regenerator",
            ["@babel/plugin-transform-runtime", {helpers: false, regenerator: true}],
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
        ]}]
    }
}]}

和配置：

"presets": [
    "react",
    ["@babel/preset-env",
    {
      "targets": {
        "esmodules": true,
        "node" : "current"
      },
    }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
  [
    "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
  ],
  [
    "@babel/plugin-transform-runtime",
    {
      "regenerator": true
    }
  ]
  ]

我尝试了这些包的许多不同组合，每次添加一个以查看它是否会构建或更改任何内容，并且没有任何更改。我也尝试将 @babel/plugin-syntax-jsx 添加到插件中，但它似乎也不起作用。

我也尝试将@babel 包也放入 .babelrc 中，但这也不起作用。

我可以尝试包含或使用任何其他软件包吗？或者可能会更改这些文件的包的设置？

编辑：package.json 依赖项包括：

"@babel/runtime": "^7.10.4",
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"core-js": "^3.6.5",
"react": "^16.0.0",
"react-dom": "^16.0.0",

Answer 1

使用此脚本创建 babel.config.js 解决了我的问题

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Answer 2

您是否在 node_modules 文件夹内运行它？如果是这样你需要改变

exclude: [/node_modules/],

所以它并不排除你的项目。

它应该成为类似的东西

exclude: [/node_modules/ &&
        !/node_modules\/(project_name)/],

但使用正确的正则表达式语法并将project_name更改为文件夹名称。