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

IT技术 javascript html reactjs yarnpkg
2021-04-22 12:35:11

我正在尝试运行非常简单的代码,但出现错误,我没有使用 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 终端

6个回答

只需创建一个.babelrc文件并添加:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
.bablerc文件放在哪里我是反应开发的新手。
2021-05-30 12:35:11
在你的项目的根。像这样:-node_modules -src -.babelrc
2021-06-07 12:35:11

就我而言,使用以下内容创建“babel.config.js”文件有效。

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

2021年

我修复了它添加

"jsx": "react-jsx"

我的tsconfig.json文件中的compilerOptions

还有一个可能的原因。尝试在包含符号链接的路径中的命令提示符下运行项目时出现此错误。将目录直接更改为真实路径解决了该问题。

这对我有用。我要去一个符号链接,然后去几个内部目录。当我在没有通过那个符号链接的情况下 cd 到真正的目录时,它开始为我工作。谢谢!
2021-06-19 12:35:11

这个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'] },
      },
它解决了我的问题,非常清晰的配置
2021-05-26 12:35:11