语法错误 React App，npm 依赖问题

Question

我有一个网站，我已经使用了几年了，但我认为它已经开始过时了。我有一段时间没碰它了，所以我不确定它到底发生了什么。我不确定问题是什么，但可能与我的webpack 版本有关，或者我的反应版本，我不太确定。

问题开始是因为我试图运行webpack --mode production，因为我想重新制作bundle.js 文件，而当我运行此命令时，该文件不会创建bundle.js。最终我以某种方式得出结论，我的webpack 版本有问题，因此我将其更新为与我的依赖项兼容的最新版本，即版本 4.46.0。我再次尝试了该命令，这次它给了我这个错误：

[0] ./src/index.js 666 bytes {0} [built] [failed] [1 error]

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

  4 |
  5 | ReactDOM.render(
> 6 |     <App />,
    |     ^
  7 |     document.getElementById("root")
  8 | );

我尝试重新安装不同版本的babel-loader，但最不严重的错误似乎是版本 7.1.5。我还尝试删除我的node-modules，然后运行npm install。这是我的package.json：

{
  "name": "mywebsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "set-dev-server": "webpack-dev-server --open --mode development",
    "start": "npm run build && npm run set-dev-server",
    "deploy": "gh-pages -d dist",
    "publish-demo": "npm run build && npm run deploy"
  },
    "repository": {
    "type": "git",
    "url": "git+my/github/link"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "my/github/link/issues"
  },
  "homepage": "my/github/link",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^1.1.11",
    "gh-pages": "^1.2.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^7.0.1",
    "jquery": "^3.5.1",
    "node-css": "^0.1.0",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.21.0",
    "styled-components": "^5.2.1",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@babel/core": "^7.13.8",
    "babel-loader": "^7.1.5",
    "css-loader": "^5.1.1",
    "node-sass": "^5.0.0",
    "schema-utils": "^3.0.0",
    "webpack": "^4.46.0"
  }
}

从我在网上找到的内容来看，这个问题也可能与 webpack.config.js 有关，但我能找到的所有问题都来自 webpack 的真正旧版本（2 或 3？），但无论如何，这就是我在那个文件里：

const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, "dist/index.html"),
  filename: "index.html"
});

module.exports = {
  entry: path.join(__dirname, "src/index.js"),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    publicPath: bundlePath,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname,'dist/'),
    port: 3000,
    publicPath: "http://localhost:3000/"
  },
  plugins: [ new webpack.HotModuleReplacementPlugin(), htmlWebpackPlugin ]
};

Answer 1

看起来您正在使用 jsx 令牌 <>，而您的文件名为 index.js。尝试将其命名为index.jsx