babel 意外令牌反应模块构建失败答案

【问题标题】：babel unexpected token react module build failedbabel 意外令牌反应模块构建失败
【发布时间】：2020-05-18 15:08:28
【问题描述】：

我有这个页面：

import React, { Fragment } from "react";
import "./Loader.css";

const Loading = ({ loadingMsg, styling }) => {
  return (
    <Fragment>
      <div className="loader">
        <p style={styling}>{loadingMsg}</p>
      </div>
    </Fragment>
  );
};

export default Loading;

我不知道为什么当我开始我的项目时它会抛出这个错误：

ERROR in ./src/components/Loading/Loading.js
Module build failed (from ./node_modules/babel-loader/lib/index.js): 
Unexpected token (6:4)

我的 babelrc 文件：

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

}

还有我的 webpack 配置文件：

const path = require('path')

module.exports = {
  target: 'web',
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  resolve: { extensions: ['.js', '.jsx'] },
  devServer: {
    port: 3000,
    publicPath: "/",
    contentBase: "./public",
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
          },
        ],
      },
    ],
  },
};

我认为我的一切都很好，所以我不明白这个加载程序文件的问题在哪里。我已经删除了片段部分，当我这样做时，在 div 上报告了相同的错误。

【问题讨论】：

听起来像是 Babel 配置的问题，即它无法解释 JSX。您是如何设置项目环境的？你用过 create-react-app 吗？
是的，我使用 create-react-app 创建它，我将我的 webpack 和 babel 配置放在主帖上！
我很困惑。如果您使用 create-react-app 除非您弹出，否则您将不会拥有自己的 webpack 配置，但即便如此，弹出的配置也已正确配置为解释 JSX，而您发布的肯定不是 CRA 的。你如何开始你的项目？ yarn start 运行 react-scripts start?
所以你告诉我，如果我使用 CRA，我不必设置我自己的 webpack 配置，因为我可以在可以看到原始配置的地方自行做出反应？
嗯.. 是的，这就是 create-react-app 的全部意义所在。它的创建是为了让开发人员不必处理配置内容并开始开发。所有与 Babel 和 Webpack 相关的东西都隐藏在 react-scripts 模块后面。除非您弹出，否则您不会找到原始的，这是您不应该做的（除非您只是想了解它的外观，在这种情况下，您可以在 github 上检查它或在单独的项目上运行 yarn eject，如这是不可逆的）。

标签： javascript reactjs babeljs babel-loader

【解决方案1】：

您需要像这样将babel-preset-env 和babel-preset-react 添加到您的项目中：

npm install --save-dev @babel/preset-env @babel/preset-react

然后使用此配置创建一个.babelrc 文件：

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

【讨论】：

你有哪些版本的 babel 和 @babel/presets？另外，你使用 Create-React-App 吗？
是的 create-react-app 和 "@babel/preset-react": "^7.9.4",
你的@babel/core 版本是多少？
"@babel/core": "^7.9.6"，我用的是最新版本
我建议回到版本 7.0.0 看看是否能解决问题