Как избавиться от проблемы которая вызвана преобразование кода webpack код react?

Question

[hollanditkzn]

И вообще я правильно делаю?
Сделал вот такой конфиг в webpack.config.js

const path = require('path');

module.exports = {
    entry: __dirname + "/public/js/AuthForm.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname + "public/src")
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }
        ]
    }
};

В файле который я преобразую

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello world!</h1>,
    document.getElementById('content')
);

И я получаю вот такую ошибку когда включаю webpack

ruslan@debian:~/Разработка/trainingPortal$ npx webpack --config webpack.config.js
Hash: ca056efec19548aca774
Version: webpack 3.10.0
Time: 501ms
    Asset    Size  Chunks             Chunk Names
bundle.js  3.2 kB       0  [emitted]  main
   [0] ./public/js/AuthForm.js 731 bytes {0} [built] [failed] [1 error]

ERROR in ./public/js/AuthForm.js
Module build failed: SyntaxError: Unexpected token (5:4)

  3 | 
  4 | ReactDOM.render(
> 5 |     <h1>Hello world!</h1>,
    |     ^
  6 |     document.getElementById('content')
  7 | );

Чтобы было понятно что у меня стоит

{
  ....
  "dependencies": {
    "koa": "^2.4.1",
    "koa-body": "^2.5.0",
    "koa-logger": "^3.1.0",
    "koa-router": "^7.3.0",
    "koa-session": "^5.5.1",
    "koa-static": "^4.0.2",
    "koa-views": "^6.1.3",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "path": "^0.12.7",
    "pug": "^2.0.0-rc.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "eslint": "^4.15.0",
    "eslint-plugin-react": "^7.5.1",
    "webpack": "^3.10.0"
  }
}

Answer 1

[Антон Спирин]

Переделайте так:

module.exports = {
  context: __dirname + "/public/js/",
  entry: "./AuthForm",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname + "public/src")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ['es2015', 'stage-0', 'react']
            }
          }]
      }
    ]
  }
};

не забудьте установить пресеты для babel:

npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0

То, что у вас исходники в папке public, как минимум, семантически неверно, переименуйте в src, client или app