【发布时间】：2020-10-23 11:15:12
【问题描述】：
所以我没完没了地在网上搜索来解决这个问题。
"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",
【问题讨论】：
-
你解决了这个问题吗？我现在也面临同样的问题
-
有人解决了这个问题吗？
-
这个运气好吗？我在这方面还没有任何进展。
-
遇到了同样的问题，更改运行 jest 的路径并切换回来解决了我的问题。示例首先我遇到了
npx jest paht/to/test/file.js的问题，我确实更改了路径，然后再次运行该命令。似乎以某种方式开玩笑缓存。不确定 -
我最终制作了一个 webpack.config.file 使用 module.exports = {.....module: {rules: [... 格式化。就像 Drews 在下面使用 babel.config.js 的第一个答案一样。据我了解，导出有助于公开配置。 tutorialsteacher.com/nodejs/….
标签： reactjs webpack jsx babeljs