Uglifyjs unexpected token name error

Attached is an image of what I am receiving when I try to bundle my project for production. I am receiving a Unexpected token name <<Object>>, expected punc <<,>> message as shown in the image.

Terminal output of error

Not sure what the issue is but I have tried to use uglify-es and uglify-js and get the same error. I even attempted to make a simple app using es6+ code to see if uglify-js worked and it did. So some of the older threads on the internet mentioning that uglify-js won't handle es6+ code might be irrelevant now. I also read somewhere that the newest version (3.x) does support it but haven't been able to confirm that.

I would love to show some code but not sure what relevant piece of code I need to show. As per the image it also mentions the line, col, pos etc... but the code on that line does not start at the col number mentioned.

I will definitely update this post as I investigate but any tips or ideas would be great!

Solution

So the issue is now resolved after some thorough research. It looks like the line 1665 I was looking at in my non-optimised bundle app.js was not what I needed to look at (obvious since the column index was way off).

So instead I decided to output the bundle generated code that FuseBox was working on and it was in-fact different. This is the line I added in node_modules/fuse-box/quantum/plugin/BundleWriter.js inside the uglifyBundle function to output the content so I could read it clearly.

fs.writeFile('bundle.txt', bundle.generatedCode);

The output in bundle.txt that was the issue and my actual TypeScript code is shown here:

// bundle.txt line 1665
this.wholesalerSettings = [object Object]

// actual project code
constructor() {
    this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
    this.API = this.setHostUrl();
}

So I took a look in my fuse.ts file and noticed I was not parsing the json object correctly.

public get wholesalerSettings()
{
    const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
    return JSON.stringify(wholesaler);
}

// then down in the environment plugin
EnvPlugin({ 
    WHOLESALERSETTINGS: this.wholesalerSettings,
    IMAGE_PATH: this.imagePath
}),

Once I parsed the object correctly with JSON.stringify it worked perfectly as process.env.WHOLESALERSETTINGS was now a JSON string instead of an Object.

First time I really dealt with devops stuff but was fun and at the same time highly stressful. I guess the main thing I learned is when you are dealing with tooling and third party tools (FuseBox uses uglify-js) then you need to take a closer look at the input that is being given to that tool rather than the output like I was at first.