Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ERROR in main.js from Terser when compiling with webpack

So I'm trying to run webpack to compile my code, but when I run npx webpack --config webpack.config.js I get the following error:

ERROR in main.js from Terser
Invalid assignment [main.js:78674,15]

There's not much to go off of, I'm not even sure where to look. Does anyone have any ideas what might be causing this?

Here's my webpack config:

const path = require('path');

module.exports = {
    entry: './server.js',
    target: "node",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/public/"
    },
    module:{
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-syntax-dynamic-import']
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            'express-handlebars': 'handlebars/dist/handlebars.js'
        }
    }
};

Thanks!

like image 556
ajnauleau Avatar asked Apr 06 '20 20:04

ajnauleau


People also ask

What is terser-Webpack-plugin?

Disclaimer: TerserWebpackPlugin is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack. This plugin uses terser to minify/minimize your JavaScript. Webpack v5 comes with the latest terser-webpack-plugin out of the box.

What happens when you bundle your source code in Webpack?

When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files ( a.js, b.js, and c.js) into one bundle ( bundle.js) and one of the source files contains an error, the stack trace will simply point to bundle.js.

When to use call stack in Webpack?

This is especially useful if you are tracing an unfamiliar code, you can quickly get a call stack that leads up to the current condition. After tracing through the call stack, I ended up at the line where the terser-webpack-plugincalls the terser, and when I logged out the error, it shows:

How do source maps work in Webpack config?

In order to make it easier to track down errors and warnings, JavaScript offers source maps, which maps your compiled code back to your original source code. If an error originates from b.js, the source map will tell you exactly that. ( Source) So I naively assumed this would work in my webpack.config.js: ...


1 Answers

RESOLVED:

This was an error with assignment where I was assigning process.end.NODE_ENV to a string, which was being compiled into two string assignment:

"node-env" = "dev-env"

I resolved this but not minimizing my webpack build:

    optimization: {
        minimize: false
    }

Then finding the assignment error line from the error output, in the non minified bundle.

Invalid function parameter [bundle.js:186393,23]

Hope this helps someone else.

like image 98
ajnauleau Avatar answered Oct 18 '22 16:10

ajnauleau