如何解决错误：“jsx”当前未启用

Posted 2023-02-22

【中文标题】如何解决错误：“jsx”当前未启用

【英文标题】：How to solve error: 'jsx' isn't currently enabled

【发布时间】：2021-05-31 07:17:08

【问题描述】：

我是 reactjs 新手。我读过类似的错误帖子，Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled 但不能解决我的问题

当我运行npm run dev

我有一个错误

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: -..../frontend/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:7):

  38 |   render() 
  39 |     return (
> 40 |       <ul>
     |       ^
  41 |         this.state.data.map(contact => 
  42 |           return (
  43 |             <li key=contact.id>

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.

我读了这段文字添加@babel/preset-react，但我不明白我应该怎么做

webpack.config.js

module.exports = 
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader"
        
      
    ]
  
;

index.js

import React,  Component  from 'react';
import  render  from "react-dom";

class App extends Component 
  constructor(props) 
    super(props);
    this.state = 
      data: [],
      loaded: false,
      placeholder: "Loading"
    ;
  

  componentDidMount() 
    fetch("api/lead")
      .then(response => 
        if (response.status > 400) 
          return this.setState(() => 
            return  placeholder: "Something went wrong!" ;
          );
        
        return response.json();
      )
     ...

【参考方案1】：

对我来说这个https://***.com/a/52693007/10952640 解决了。

TL;DR: 您必须将 @babel/preset-react 安装为 devDep，并安装在 babel config 和 weback 上。

React 应用程序使用 Babel 转换为“常规”javascript，并使用 Webpack 捆绑到单个 js 文件中。你必须设置一个“预设”，@babel/preset-react，以便那些理解 React 结构的人。

正如 Dan Cantir 所说，您必须先安装预设。

那么你必须在 .babelrc （或你用于 babel 配置的其他格式）上启用它。我的整个 .babelrc：

    "presets": ["@babel/preset-env", **"@babel/preset-react**"]

最后你必须在 webpack 配置文件中设置它（有些省略）：

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

【参考方案2】：

首先你需要运行npm install --save-dev @babel/preset-react。

这将安装 @babel/preset-react 包并将其添加到您的 package.json 文件中。

然后你需要在你的src文件夹中创建一个.babelrc文件并粘贴以下内容：

  "presets": ["@babel/preset-react"]

之后，您可以再次运行npm run dev。