javascript - Webpack 打包 ReactDOM 导致 loader 错误

Question

当我运行webpack --modedevelopment时，出现以下错误:

编辑 请求查看我的 .babelrc 的评论，添加在下面 - 我已尝试将索引和应用程序文件的所有组合都作为 .jsx 文件或分别作为 .jsx 文件，但无济于事。 - 我还尝试删除并读取所有节点模块作为节点的最新版本(v10.x.x)

ERROR in ./src/index.js 4:16
  Module parse failed: Unexpected token (4:16)
  You may need an appropriate loader to handle this file type.
  | import ReactDOM from "react-dom";
  | import app from "./app.js";
 ReactDOM.render(<app />, document.getElementById("root"));

app.js

import React, {Component} from "react";
import {hot} from "react-hot-loader";
import "./app.css";

class app extends Component{
  render(){
    return(
      <div className="app">
        <h1> Hello, World! </h1>
      </div>
    );
  }
}

export default app;

index.js

import React from "react";
import ReactDOM from "react-dom";
import app from "./app.js";
ReactDOM.render(<app />, document.getElementById("root"));

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.jsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /css\*\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://testsite.test/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements"
  ]
}

我很快就会尝试将其加载到 GH 上，但我的 GH 帐户和设备连接现在遇到了一些真正的问题(ssh key 问题)。请耐心等待，希望以上内容足以提供帮助。

编辑#2:这是我的 github 存储库 https://github.com/johnfwebdev/testsite.test

Answer 1

像这样用babel改造react jsx，试试吧

.babelrc

{
  "presets": [["@babel/preset-env"]],
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}