CODEWITHSUNDEEP
reactjsbundleuglifyjs
pmonty
pmonty

Reputation: 80

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!

Upvotes: 2

Views: 4319

Answers (2)

pmonty
pmonty

Reputation: 80

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.

Upvotes: 2

JJPandari
JJPandari

Reputation: 3522

UglifyJS says it sees Object where it's expecting a ,, so we can infer:

  • The code you wrote (or generated by some other tool right before uglifyJS processes it, e.g. babel? Though you probably don't use babel since your uglifyJS deals with es6 directly) is "Object" where the error occurs.
  • It's expecting a ,, so the error is occuring at some place like multiple variable declaration, let foo, bar, or object/array definition, [1, 2] {foo: 1, bar: 2}

Upvotes: 0

Related Questions