CODEWITHSUNDEEP
javascriptwebpack
Oliver Gebert
Oliver Gebert

Reputation: 1176

Webpack Unexpected Token / no loader for filetype

I have a plain JavaScript app that could not be build with WebPack. I removed everything until only those lines remain:

class MyClass {
    doStuff = (abc) => {

    }
}

The error message I get is the following:

ERROR in ./src/js/mapdata.js 2:12
Module parse failed: Unexpected token (2:12)
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
| class MyClass {
>     doStuff = (abc) => {
|
|     }

My webpack.config looks like this:

const path = require('path');

module.exports = {
    entry: './src/js/mapdata.js',
    output: {
        filename: 'rwmaps.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            { test: /\.json$/, use: 'json-loader' }
        ]
    }
};

I have no clue what the problem is. The JS is working fine if I access it directly from a web page (with ). Any ideas?

Upvotes: 0

Views: 214

Answers (1)

HIMANSHU SINGHAL
HIMANSHU SINGHAL

Reputation: 58

You might be missing the babel loader and class properties. Try adding following dependencies in package.json

"@babel/core": "^7.10.1",    "@babel/plugin-proposal-class-properties": "^7.10.1",    "@babel/preset-env": "^7.10.1",    "babel-loader": "^8.1.0"

Also, create .babelrc and add following code:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Lastly, update webpack.config.js file with following rule:

    { test: /\.m?js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

I hope it helps!

Upvotes: 1

Related Questions