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

Question

我是reactjs新手。我读过类似的错误帖子，语法错误：当前未启用对实验性语法“jsx”的支持 ，但无法解决我的问题

当我跑步时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.

我读了这篇文章Add @babel/preset-react但我不明白我应该做什么

webpack.config.js

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

索引.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();
      })
     ...

Answer 1

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

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

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

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

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