Ionic-app-scripts: error : ionc build ios or android, uglifyjs failed: SyntaxError: Unexpected token: operator (>)

[jgw96]

_From @tianleios on October 20, 2016 12:2_

when i run ionic build ios. will display fllow errror，uglifyjs cannot support es6 feature arrow function
] ngc finished in 32.81 s
[19:52:49] bundle started ...
[19:53:01] bundle finished in 12.33 s
[19:53:01] uglifyjs started ...
[19:53:01] sass started ...
[19:53:02] uglifyjs failed: SyntaxError: Unexpected token: operator (>)
[19:53:02] ionic-app-script task: "build"
[19:53:02] Error: SyntaxError: Unexpected token: operator (>)

_Copied from original issue: driftyco/ionic#8817_

[jgw96]

Hello, thanks for opening an issue with us! uglifyJS does support arrow functions. Are you using the correct syntax for arrow functions? setTimeout(() => {});

[jgw96]

_From @haxpor on October 20, 2016 17:56_

@jgw96 it happens the same for me with uglifyjs failed: SyntaxError: Unexpected token: operator (>). For my case, it's due to one of node modules I imported has es6 code, specifically arrow function. I tried not to import that module, and it passes, no error but not the other way around.

It seems uglifyJS has es6 support but in another branch harmony, once I tried hooking it up with gulp but failed. I don't know how to do it properly though.

Is it the case? If not, how to make this works with ionic 2.

Updated: I solved the problem now. As @jgw96 said that uglifyJS already supports es6, I just changed node_modules/@ionic/app-scripts/package.json file for uglify-js to git+https://github.com/mishoo/UglifyJS2.git#harmony. Then it automatically solves the problem. I now can build without error. For study, I will take a look at its code later on how the team did this as I failed before. Thanks.

[jgw96]

_From @tianleios on October 21, 2016 8:32_

@haxpor can you display you resolve function detail

[jgw96]

_From @tianleios on October 21, 2016 8:32_

@jgw96 i confirm i use correct arrow function

[jgw96]

_From @haxpor on October 22, 2016 1:22_

@tianleios On your root project directory, edit node_modules/@ionic/app-scripts/package.json file. Then in that file update uglify-js like this "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony".

Then after that execute npm install (make sure right now you're at node_modules/@ionic/app-scripts. Ignore error that shown. I have shown error about jasmine's build for path variable that it seems like it need src, but it works at the end.

[jgw96]

_From @zhang-z on October 23, 2016 8:35_

@haxpor , the 'harmony' solution is working, thank you!

[danbucholtz]

Our solution will be to provide a hook so users that need to can transpile/modify the code down to es5. We won't be supporting this directly in ionic serve because it will be too slow.

I'll implement the hook and documentation.

Thanks,
Dan

[timofeysie]

I am getting a similar error:

[08:27:12] uglifyjs failed: SyntaxError: Unexpected token: name (check)
[08:27:12] ionic-app-script task: "build"
[08:27:12] Error: SyntaxError: Unexpected token: name (check)

I tried changing the "uglify-js" to "git+https://github.com/mishoo/UglifyJS2.git#harmony" in the node_modules/@ionic/app-scripts/package.json as recommended above, but it does not solve the error.
Since there is no 'check' in my code, I looked at a recently installed lib, "crypto-pouch": "^3.1.0".
Removing this allows the build to complete.
Should I raise this issue with crypto-pouch, or will the solution to this error be addressed here?

[danbucholtz]

@timofeysie,

I'm not sure. I think a base case would be trying to minify that library on it's own independent from app-scripts or ionic. It may just be a bug in the library itself.

Thanks,
Dan

[DilipNikam]

Thanks a lot @jgw96 .....

as per you suggestion I did the changes & my application successfully deployed on device without showing any uglifyjs error. Also my async method working as I expected.....

[danbucholtz]

We have added some alternative options to uglify. Unfortunately, uglify does not work well with ES2015 code. Feel free to use closure or babili. Both are in master and will be available in the next version of app-scripts.

Thanks,
Dan

[Hyperonic]

@danbucholtz

I'm getting error on production build with webpack

uglifyjs failed: SyntaxError: Invalid syntax: 0a.
Error
at new JS_Parse_Error (eval at (..../node_modules/@ionic/app-scripts/node_modules/uglify-js/tools/node.js:28:1), :1928:18)

Tried the harmony solution given by @jgw96 but didn't solve the bug. After installing ionic-app-scripts from master how do I use closure or babili ?

[BradyLiles]

@danbucholtz Awesome, thanks Dan! I'm super excited for this... I've been having to just disable uglify when this happens..

[ghost]

Hey @BradyLiles how did you manage to disable uglifyjs? I can't seem to find a way to do it without resorting to hacky solutions (or, is that what you did?).

[BradyLiles]

Definitely just did a awesome hacky fix... However, I do know (Well at least think) that you can do it without a hack by passing the correct flags whenever you build..

[BradyLiles]

You might also be able just to override the uglifyjs.config.js file and make it work for you over there...

Seems like they have some options you might be able just set to false/null and get away with not doing a hacky approach.
node_modules/@ionic/app-scripts/config/uglifyjs.config.js

[danbucholtz]

@callodacity,

You can disable minification by running ionic run android --aot (for example).

Thanks,
Dan

[ghost]

@danbucholtz @BradyLiles Thanks guys - appreciate that 👍 Previously I was just editing the build file inside node_modules/@ionic/app-scripts/...
Keep up the good work

[chrisnicola]

@danbucholtz is there a way to minify with something else, what about the UglifyJS harmony solution?

[KarimMesallam]

The harmony fix never works with app-scripts v1.3.7, it used to work with older versions of app-scripts though.

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 7.0.0
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.2.0

System:

    Node       : v6.10.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 5.0.13

[danbucholtz]

@KarimMesallam, You could try uglify-es.

Thanks,
Dan