CODEWITHSUNDEEP
javascriptangularjswebpackbabel-loader
Vincurekf
Vincurekf

Reputation: 107

Webpack@5 + angularJS + babel: Module parse failed: Unexpected token (2115:9), no loaders are configured to process this file

Until today, builds were succesfull without any errors, only warning about build size (I am using socket.io-client and some other packages without issues). I have made many succesfull builds with my simple config.

I am not using typescript, it's a simple single page website, the site is live and running with production build scripts from yesterday. But today, after running npm update (which updated nothing), I can't make any changes because the build fails no matter what I try to fix it.

Any help is appreciated.

I am getting the following error:

ERROR in ./node_modules/angular/angular.js 2115:9
Module parse failed: Unexpected token (2115:9)
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
|  * throw error if the argument is falsy.
|  */
> function assertArg(arg, name, reason) {
|   if (!arg) {
|     throw ngMinErr('areq', 'Argument \'{0}\' is {1}', (name || '?'), (reason || 'required'));
 @ ./node_modules/angular/index.js 1:0-20
 @ ./resources/assets/app/index.js 15:14-32

webpack 5.45.0 compiled with 1 error and 1 warning in 38636 ms

The error is generated by the babel-loader, using version 8.2.2:

"node_modules/babel-loader": {
  "version": "8.2.2",
  "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
  "integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
  "dev": true,
  "dependencies": {
    "find-cache-dir": "^3.3.1",
    "loader-utils": "^1.4.0",
    "make-dir": "^3.1.0",
    "schema-utils": "^2.6.5"
  },
  "engines": {
    "node": ">= 8.9"
  },
  "peerDependencies": {
    "@babel/core": "^7.0.0",
    "webpack": ">=2"
  }
},

My webpack.common.js:

const config = {
  resolve: {
    modules: [path.resolve(__dirname, 'resources/assets'), 'node_modules'],
  },
  entry: {
    app: './resources/assets/app/index.js',
  },
  output: {
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(), new WebpackBuildNotifierPlugin(
      {
        title: "Build Complete!", 
        sound: true,
      }
    ),
  ],
  optimization: {
    sideEffects: true,
    usedExports: false,
    removeEmptyChunks: true,
    concatenateModules: true,
    mangleExports: 'size',
  }
};
module.exports = config;

Then I use that config in my webpack.dev.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge( common, {
  mode: 'development',
  devtool: 'inline-source-map',
});

Running dev build with:

webpack --mode development --watch --config webpack.dev.js

According to package-lock.json my angular version is 1.8.2:

"node_modules/angular": {
  "version": "1.8.2",
  "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.2.tgz",
  "integrity": "sha512-IauMOej2xEe7/7Ennahkbb5qd/HFADiNuLSESz9Q27inmi32zB0lnAsFeLEWcox3Gd1F6YhNd1CP7/9IukJ0Gw=="
},

My npm and node versions:

$ npm -v
7.19.1

$ node -v
v16.5.0

Upvotes: 0

Views: 2583

Answers (1)

Vincurekf
Vincurekf

Reputation: 107

Finally solved the issue. In the end I removed node_modules folder, removed all unnecessary packages from package.json, did a clean npm install and build are working now. I made no changes to the webpack configs.

So I really don't know what was the problem, it might be some module acting up.

Upvotes: 1

Related Questions