Ошибка сборки пакета Webpack - Сбой при разборе модуля: неожиданный токен

Question

Я пытаюсь собрать пакет веб-пакета.

При работе:

webpack --config webpack.config. js

Я получаю эту ошибку:

ОШИБКА в ./templates/components/lobby/index.js 13:20 Ошибка разбора модуля: неожиданный токен (13:20)

Кажется, это распространенная ошибка, с которой сталкиваются люди при использовании веб-пакета. Я проконсультировался со многими страницами stackoverflow, описывающими проблему, и обсуждениями на github, такими как этот: https://github.com/babel/babel-loader/issues/173

Большинство людей, кажется, решают проблему, изменяя свою версию веб-пакета. Я пробовал версии веб-пакетов с приращением от 4.28.0 до 4.42.0, но так и не добился успеха. Я также попытался выполнить чистую установку и использовать пряжу вместо npm для установки пакетов. Это тоже не сработало.

Это наводит меня на мысль, что моя проблема не в управлении версиями моих инструментов сборки, а в моем webpack.config. js или моем пакете. json самих.

Это мой webpack.config. js:

// load the needed node modules
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

// webpack project settings
module.exports = {
  context: __dirname,
  entry: {
          lobby: './templates/components/lobby/index',
  },
  output: {
      path: path.resolve('./static/bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({path: __dirname, filename: './webpack-stats.json'})

  ],

    module: {
  rules: [
    {
      test: /\.jsx$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015', 'react']
      },
      //options: {
      //  presets: ['@babel/preset-env','@babel/preset-react']
      //}
    },

  ]
},

  resolve: {
    modules: ['node_modules'],
    extensions: ['*', '.js', '.jsx']
  },
  mode: 'development'
}

И это мой пакет. json:

{
  "name": "name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "acorn-dynamic-import": "^4.0.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "jquery": "^3.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-websocket": "^2.1.0",
    "webpack": "^4.42.0",
    "webpack-bundle-tracker": "^0.4.3"
  }
}

И эта полная ошибка выдается при запуске webpack --config webpack.config. js:

ОШИБКА в ./ шаблоны / компоненты / лобби / индекс. js 13:20 Ошибка синтаксического анализа модуля: неожиданный токен (13:20) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders | // выводит базовый компонент | function render_component () {ReactDOM.render (, document.getElementById ('obby_component ')) | } |

Я новичок в веб-разработке и действительно не знаю, в чем проблема. Я провел прошлый день, просматривая онлайн в поисках потенциальных решений, но безрезультатно. Любые советы или рекомендации будут очень признательны. Спасибо!