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

问题描述 投票：0回答：19

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

javascript html reactjs yarnpkg
19个回答
168
投票

只需在项目的根目录中创建一个 

.babelrc
文件并添加：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
28
投票

就我而言，创建包含以下内容的“babel.config.js”文件是有效的。

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

这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'] },
      },
9
投票

2021

我修复了它添加

"jsx": "react-jsx"

到我的 tsconfig.json 文件中的“compilerOptions”

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

6
投票
对我有用的解决方案是当我发现

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 来说很可能也是如此。）


如果您在 create-react-app 项目上运行了 npm runject，这可能适用于其他人。这将创建 webpack.config.js 文件并将 babelrc 和 configFile 默认为 false。

    



      

      
      
      

      

        

          

            

              
4
投票

              
            

          

        

        
我从头开始重新制作了我的项目，并意识到我在命令末尾不包含“D”是错误的：


yarn add webpack-dev-server -D

现在可以使用了！

    



      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
嗯，我认为问题出在你的 babel 上，试试这个：




    npm i --save-dev @babel/plugin-proposal-class-properties
  1. 

    2. 在你的babelrc中添加loose:true
  2. 

    3. 
    



      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
添加另一个答案......当我点击这个项目时，我正在查看的项目是使用React脚本v4和React 17构建的。警告向我显示了与第三个源代码相关的警告-派对模块，例如：


create-react-app


问题原来是有人错误地添加了第三方组件的导入，如下：
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';



因此，webpack 尝试使用包的原始源代码而不是编译后的导出。并且，检查
import { Header } from '@third-party/ui-components';

，应用程序外部 JS 的模块加载器设置如下：


react-scripts


通过删除 
// 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< -----
  },
}

 修复导入路径解决了问题。

    


在我的 package.json 中，我添加了：

      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
/src

    


我遇到了同样的错误，我的问题是在 rebase 过程中我在某个地方丢失了一个大括号，所以我的 package.json 无法正常工作 - 如果你的 babel 显示这样的错误 - 尝试检查你的 package.json 是否正确设置了括号向上

      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        




如果您使用 Babel 7 和纱线工作区或 monorepo 并收到此错误，您需要告诉 Babel 在包目录之外转译文件。

      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        
在你的 webpack 5 配置中将 babelrcRoots: ['../*'] 放在你的 js 测试对象选项中。以我的为例：


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



请参阅
此 github 问题
中的其他选项
    


对于 Rails/React，运行以下行：

      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

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


    


如果使用 React 和 Rails，请在 webpacker.yml 文件中添加 jsx 扩展名。

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
$ bin/rails webpacker:install:react


    


对我来说，测试不仅仅在 VSCode 中有效。我使用纱线工作区和 CRA 作为工作区之一。

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

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


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


    


对于在构建 Remix 应用程序时遇到此错误的人，请将文件扩展名从 .js 更改为 .jsx/.tsx 或检查 tsconfig 文件。

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




我在将 create-react-app 转换为 vite 应用程序时遇到此错误，并且我没有将所有 .js 文件更改为 .jsx 文件。因此，如果要转换，请确保将所有 .js 文件更改为 .jsx 文件。

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




我正在使用 React 

      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
 及以上版本。


两个简单步骤：




首先检查您是否已将 
    18
  •  添加到 package.json 中。如果没有，那么
    "@babel/preset-react"
    。
    

    使用 
    • install i  @babel/preset-react
  •  值更新您的 
    babel.config.js
    。记得在配置中添加
    "@babel/preset-react"
    。
    

    

    automatic
    • 
    


module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};


      

      
      
      

      

        

          

            

              
-2
投票

              
            

          

        

        
根据下面的链接对你的 babel.config.js 进行更改
来自 
https://www.nativewind.dev/quick-starts/create-react-native-app

然后只需添加如上所示的预设即可。
    





      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.