当前未启用对实验性语法“jsx”的支持答案

【问题标题】：Support for the experimental syntax 'jsx' isn't currently enabled当前未启用对实验性语法“jsx”的支持
【发布时间】：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 终端

【问题讨论】：

相关：stackoverflow.com/q/62820035/104380

标签： javascript html reactjs yarnpkg

【解决方案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://stackoverflow.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.config options: { 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” ] }

【讨论】：