Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

error : ionc build ios or android, uglifyjs failed: SyntaxError: Unexpected token: operator (>) #239

Closed
jgw96 opened this issue Oct 25, 2016 · 21 comments
Assignees

Comments

@jgw96
Copy link
Contributor

jgw96 commented Oct 25, 2016

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: ionic-team/ionic-framework#8817

@jgw96
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

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

@jgw96
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

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
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

From @tianleios on October 21, 2016 8:32

@haxpor can you display you resolve function detail

@jgw96
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

From @tianleios on October 21, 2016 8:32

@jgw96 i confirm i use correct arrow function

@jgw96
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

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
Copy link
Contributor Author

jgw96 commented Oct 25, 2016

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

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

@danbucholtz
Copy link
Contributor

danbucholtz commented Oct 28, 2016

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
Copy link

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
Copy link
Contributor

@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
Copy link

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
Copy link
Contributor

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
Copy link

@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 ?

@BradyNadeau
Copy link

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

@ghost
Copy link

ghost commented Feb 1, 2017

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?).

@BradyNadeau
Copy link

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..

@BradyNadeau
Copy link

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
Copy link
Contributor

@callodacity,

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

Thanks,
Dan

@ghost
Copy link

ghost commented Feb 3, 2017

@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
Copy link

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

@KarimMesallam
Copy link

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
Copy link
Contributor

@KarimMesallam, You could try uglify-es.

Thanks,
Dan

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants