Webpack bundle build error - Module parse failed: Unexpected Token

Question

I am attempting to build a webpack bundle.

When running:

webpack --config webpack.config.js

I get this error:

ERROR in ./templates/components/lobby/index.js 13:20 Module parse failed: Unexpected token (13:20)

This seems to be a common error people have when using webpack. I have consulted many stackoverflow pages describing the issue, and github discussions such as this one: https://github.com/babel/babel-loader/issues/173

Most people seem to solve the issue by changing their webpack version. I have tried webpack versions in increments, from 4.28.0 up to 4.42.0, never yielding any success. I have also tried doing a clean install, and using yarn instead of npm to install packages. This had not worked either.

This leads me to believe my issue is not with versioning of my build tools, but with my webpack.config.js or my package.json themselves.

This is my 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'
}

And this is my package.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"
  }
}

And this is the full error given when I run webpack --config webpack.config.js:

ERROR in ./templates/components/lobby/index.js 13:20 Module parse failed: Unexpected token (13:20) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | // renders out the base component | function render_component(){ ReactDOM.render(, document.getElementById('lobby_component')) | } |

I'm new to web development, and really have no idea what the issue could be. I've spent the past day browsing around online looking for potential solutions, to no avail. Any tips or recommendations would be very much appreciated. Thank you!

Webpack bundle build error - Module parse failed: Unexpected Token

0 Answers