当前未启用对实验性语法“jsx”的支持
Man*_*ini 47 html javascript reactjs yarnpkg
我正在尝试运行非常简单的代码，但出现错误，我没有使用 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.
我正在使用纱线和 WSL 终端
Már*_*ada 33
只需创建一个.babelrc文件并添加：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
- 在哪里放置`.bablerc`文件。我是反应开发新手。 (5认同)
- <叹息> 构建/命名 babel 的团队确实需要重新阅读 Hitchiker 的指南。如果他们需要的话，我什至会给他们一些口袋里的绒毛。我一直把 .babelrc 放在耳边，但我得到的只是一种巨大的头痛。 (3认同)
- 在你的项目的根上。像这样：-node_modules -src -.babelrc (2认同)
小智 28
这/sf/answers/3688510521/为我解决了。
你还需要在 webpack 配置上设置@babel/preset-react：
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env','@babel/preset-react'] },
},
小智 9
2021年
我修复了它添加
"jsx": "react-jsx"
到我的tsconfig.json文件中的“ compilerOptions ”
就我而言，使用以下内容创建“babel.config.js”文件有效。
module.exports = {
presets:[
"@babel/preset-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来说很可能也是如此。）
如果您在 create-react-app 项目上运行了 npm runject ，这可能适用于其他项目。这将创建 webpack.config.js 文件并将 babelrc 和 configFile 默认为 false。
| 归档时间： |
|
| 查看次数： |
66900 次 |
| 最近记录： |