当前未启用对实验性语法“jsx”的支持
Posted
技术标签:
【中文标题】当前未启用对实验性语法“jsx”的支持【英文标题】:Support for the experimental syntax 'jsx' isn't currently enabled 【发布时间】:2020-11-10 06:32:44 【问题描述】:我正在尝试运行非常简单的代码,但出现错误,我没有使用 create react 应用程序!
看起来我的 babel.config.js 文件被忽略了!
这是我的小项目的结构:
我的 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReactJS</title>
</head>
<body>
<div id="app"></div>
<script src = 'bundle.js' ></script>
</body>
</html>
我的 index.js 文件:
import React from 'react';
import render from 'react-dom';
render(<h1>Hello World!!</h1>, document.getElementById('app'));
我的包json:
"name": "front",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts":
"dev": "webpack-dev-server --mode development",
"build": "webpack-dev-server --mode production"
,
"dependencies":
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
,
"devDependencies":
"@babel/plugin-transform-runtime": "^7.9.0",
"babel-loader": "^8.1.0",
"webpack-dev-server": "^3.10.3"
我的 webpack.config.js
const path = require('path');
module.exports =
entry: path.resolve(__dirname, 'src', 'index.js'),
output:
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
,
devServer:
contentBase: path.resolve(__dirname, 'public'),
,
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
use:
loader: 'babel-loader',
]
,
;
这是我的 babel.config.js
module.exports =
"presets": ["@babel/preset-env", "@babel/preset-react"]
;
出错时
yarn webpack-dev-server --mode development
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8):
2 | import render from 'react-dom';
3 |
> 4 | render(<h1>Hello World!!</h1>, document.getElementById('app'));
| ^
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
ℹ 「wdm」: Failed to compile.
我正在使用 yarn 和 WSL 终端
【问题讨论】:
相关:***.com/q/62820035/104380 【参考方案1】:只需创建一个.babelrc
文件并添加:
"presets": ["@babel/preset-env", "@babel/preset-react"]
【讨论】:
.bablerc
文件的放置位置。我是 react 开发新手。
在项目的根目录上。像这样:-node_modules -src -.babelrc【参考方案2】:
就我而言,创建具有以下内容的“babel.config.js”文件是可行的。
module.exports =
presets:[
"@babel/preset-env",
"@babel/preset-react"
]
【讨论】:
【参考方案3】:2021
我修复了它添加
"jsx": "react-jsx"
到我的 tsconfig.json 文件中的“compilerOptions”
【讨论】:
【参考方案4】:还有另一个可能的原因。尝试在包含符号链接的路径的命令提示符中运行项目时出现此错误。将目录直接更改为真实路径解决了这个问题。
【讨论】:
这对我有用。我要去一个符号链接,然后去几个内部目录。当我改为 cd 到真正的目录而不通过该符号链接时,它开始为我工作。谢谢!【参考方案5】:这个https://***.com/a/52693007/10952640 为我解决了。
你还需要在 webpack 配置中设置 @babel/preset-react:
module:
rules: [
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: presets: ['@babel/env','@babel/preset-react'] ,
,
【讨论】:
它解决了我的问题,非常清晰的配置【参考方案6】:当我发现node_modules/react-scripts/config/webpack.config.js
包含:
// @remove-on-eject-begin
babelrc: false,
configFile: false,
通过设置babelrc: true,
,我终于能够让 .babelrc 更改生效。我猜configFile:
参数是您需要更改的。 (注意,babelrc 似乎需要进入 src/
才能让 react-scripts 找到它,babel.config.js 也很可能也是如此。)
【讨论】:
【参考方案7】:嗯,我认为问题出在你的 babel 上,试试这个:
-
npm i --save-dev @babel/plugin-proposal-class-properties
在你的 babelrc 中添加松散:真
【讨论】:
看起来你必须在 webpack.configoptions: presets: ['@babel/preset-env', '@babel/react', 'plugins': ['@babel/plugin-proposal-class-properties']]
的规则中包含一些选项
我做到了,同样的问题【参考方案8】:
我从头开始重新制作我的项目,并意识到我在命令末尾不包含“D”是错误的:
yarn add webpack-dev-server -D
现在可以了!
【讨论】:
不需要重新制作项目,上面的命令就可以了。【参考方案9】:如果使用 react with rails 则在 webpacker.yml 文件中添加 jsx 扩展。
extensions:
- .jsx
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
【讨论】:
【参考方案10】:在我的 package.json 中,我添加了:
“通天塔”: “预设”:[ "@babel/反应", “@babel/env” ], “插件”:[ "@babel/proposal-class-properties", “@babel/plugin-transform-runtime” ]
【讨论】:
以上是关于当前未启用对实验性语法“jsx”的支持的主要内容,如果未能解决你的问题,请参考以下文章
SyntaxError:当前未启用对实验性语法“jsx”的支持
Babel throwing 当前未启用对实验性语法“jsx”的支持
如果已启用,如何修复“当前未启用对实验语法 'classProperties' 的支持”错误?