Support for the experimental syntax 'jsx' isn't currently enabled

I'm trying to run very simple code, but I'm getting an error, I didn't use the create react app!

It looks like my babel.config.js file is being ignored!

This is the structure of my small project: enter image description here

My html file

<!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>

My index.js file:

import React from 'react';
import { render } from 'react-dom';


render(<h1>Hello World!!</h1>, document.getElementById('app'));

My package 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"
}
}

My 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',
}
}]
},
};

And this is my babel.config.js

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


};

Error when

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.

I'm using yarn and the WSL terminal

198578 次浏览
小开

嗯，我觉得问题出在你的巴别塔上，试试这个:

  1. Npm i —— save-dev@babel/plugin-amp-class-properties
  2. add loose:true in your babelrc
小开

我从头开始重新制作我的项目，并意识到我错了，在命令的末尾没有加上“ D”:

yarn add webpack-dev-server -D

Now it's working!

小开

在 webpacker.yml 文件中添加 jsx 扩展名。

  extensions:
- .jsx
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
小开

对我有效的解决办法是，当我发现 node_modules/react-scripts/config/webpack.config.js包含:

                // @remove-on-eject-begin
babelrc: false,
configFile: false,

通过设置 babelrc: true,，我终于能够得到。Babelrc 换工作了。我猜想 configFile:参数是您需要更改的。(注意，babelrc 似乎需要进入 src/才能找到反应脚本，对于 babel.config.js 也是如此。)

小开

只需在项目的根目录中创建一个 .babelrc文件，然后添加:

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
小开

在我的例子中，使用以下内容创建“ babel.config.js”文件是可行的。

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

二零二一年

I fixed it adding

"jsx": "react-jsx"

我的“ 编译器选项”在我的 Tsconfig.json文件

小开

又一个可能的原因。当我尝试在命令提示符中运行一个包含符号链接的路径的项目时，我得到了这个错误。将目录直接更改为实际路径解决了这个问题。

小开

在我的软件包 json 中，我添加了:

 "babel": {
"presets": [
"@babel/react",
"@babel/env"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}
小开

这个 https://stackoverflow.com/a/52693007/10952640帮我解决了。

您还需要在 webpack 配置中设置@babel/preset-response:

  module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env','@babel/preset-react'] },
},
小开

对于我来说，这个测试不仅仅在 VSCode 中工作，我使用纱线工作区和 CRA 作为其中的一个工作区。

这意味着解决方案是忽略失败的 VSCode 测试，而是在命令行中启动测试:

yarn workspace frontend test

小开

我也遇到了同样的错误，我的问题是在 rebase 中我丢失了一个大括号，所以我的 package.json 不能正常工作——如果你的 babel 显示了这样的错误——试着检查一下你的 package.json 是否正确设置了大括号

小开

对于在构建 Remix 应用程序时出现此错误的用户，请将文件扩展名从。干杯。Jsx/.Tsx 或使用 tsconfig 文件进行检查。

小开

添加另一个答案的组合... 项目我正在看，当我击中这是建立在 create-react-app使用反应脚本 v4和反应17。这个警告是针对第三方模块的源代码显示的，类似于:

Failed to compile.
                                                                                                                                                                                                                                      

./node_modules/@third-party/ui-components/src/components/Header.js
SyntaxError: C:\Development\app\node_modules\@third-party\ui-components\src\components\Header.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:5)

问题原来是有人错误地将第三方组件的导入添加如下:

import { Header } from '@third-party/ui-components/src';

而不是:

import { Header } from '@third-party/ui-components';

因此，webpack 试图使用包的原始源代码，而不是编译后的导出。并且，检入 react-scripts，应用程序外部的 JS 模块加载程序设置如下:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// ----- 8< -----
},
}

通过删除 /src修复导入路径修复了问题。

小开

如果您正在使用 Babel 7和纱线工作区或 monorepo，并得到这个错误，您需要告诉 Babel 将文件传输到您的包目录之外。

在 webpack 5配置中，将 babelrcRoots: [’. ./*’]放在 js test object 选项中:

  {
use: ['babel-loader'],
exclude: /node_modules/,
test: /\.(js|jsx)$/,
options: {
presets: ['@babel/preset-env'],
babelrcRoots: ['../*']
}
},

请参阅 这个 Github 问题中的其他选项

小开

对于 Rails/React，运行以下代码行:

$ bin/rails webpacker:install:react
小开 
module.exports = {
plugins: ["nativewind/babel"],
presets: ['babel-preset-expo'],
};

根据下面到 babel.config.js 的链接进行更改

From https://www.nativewind.dev/quick-starts/create-react-native-app

然后只要添加上述预设置，它将工作。


提交答案