目前未启用对实验性"jsx"的支持 [英] support for the experimental 'jsx' isn't currently enabled

问题描述

所以我无休止地在网上搜索以解决此问题.

So I have endlessly searched the web to fix this issue.

"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更改为:

So I had tons (like 100) of these as errors, so I altered my .babelrc and .babel.config.js to look like:

{
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
    }
  ]
  ]

解决了大多数这些错误.

Which resolved most of these errors.

但是我仍然看到5个文件都出现同样的错误->这5个文件与之前抛出完全相同错误的100个文件之间没有明显差异.

However I keep seeing this same error for 5 files -> there are no noticeable differences between these 5 files and the 100's that were throwing the exact same errors before.

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

Upon the advice of other stack overflow answers and the internet I changed my .babelrc and 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添加到插件中，但似乎也不起作用.

I have tried many different combinations of these packages, adding one each time to see if it would build or change anything and nothing changed. I also tried adding @babel/plugin-syntax-jsx to the plugins, but it didn't seem to work either.

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

I've also tried having the @babel packages into the .babelrc as well, but that didn't work either.

还有其他可以尝试包含或使用的软件包吗?或可能会更改这些文件的软件包的设置?

Is there any other packages I can try to include or use? Or settings for the packages that might change it for these files?

package.json依赖项包括:

package.json dependencies include:

"@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",

推荐答案

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

Creating a babel.config.js with this script solve my issue

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

这篇关于目前未启用对实验性"jsx"的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！