Упаковка веб-пакета ReactDOM, вызывающая ошибку загрузчика

Question

Когда я запускаю webpack --mode development, я получаю следующую ошибку:

Редактировать Запрошен комментарий для просмотра моего .babelrc, добавлен ниже - Я пробовал все комбинации файлов индекса и приложения как оба, так и каждое, как файлы .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). Примите это во внимание, надеюсь, вышесказанного достаточно, чтобы помочь.

Редактировать # 2: Вот мой репозиторий github https://github.com/johnfwebdev/testsite.test

Answer 1

преобразование реагирует JSX с Babel, как это, попробуйте

.babelrc

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

Answer 2

Я все разобрался .... .... facepalm:

webpack-config.js должен был быть назван webpack.config.js