Skip to content

ERROR with UglifyJs when building npm start build:prod #853

Closed
Closed
ERROR with UglifyJs when building npm start build:prod#853

Description

@techno-mike-git
techno-mike-git
opened on Aug 12, 2016

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

  • I'm submitting a ...
    [x] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    Uglify gives an ERROR when running npm run build:prod
    `
    ERROR in 1.87152edfeeca0e76c2dd.chunk.js from UglifyJs
    SyntaxError: Unexpected token: name (Detail) [./~/angular2-template-loader!./src/app/+detail/detail.component.ts:13,0]

ERROR in 2.d14d91212c6668d117ed.chunk.js from UglifyJs
SyntaxError: Unexpected token: name (About) [./~/angular2-template-loader!./src/app/about/about.component.ts:29,0]

ERROR in main.7ef34497f05b466f628b.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/angular2-template-loader!./src/app/app.component.ts:61,0]
`

npm run build:dev works fine and the only file I've changed is tsconfig.json with target: "es6" because of another bug

  • What is the current behavior?
    Can't uglify the main.bundle.js
  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
    https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
    I changed the tsconfig.json - target: "es6" because it's not recognizing "Set" and others es6 then I did a npm run build:prod :
    `
    ERROR in 1.87152edfeeca0e76c2dd.chunk.js from UglifyJs
    SyntaxError: Unexpected token: name (Detail) [./~/angular2-template-loader!./src/app/+detail/detail.component.ts:13,0]

ERROR in 2.d14d91212c6668d117ed.chunk.js from UglifyJs
SyntaxError: Unexpected token: name (About) [./~/angular2-template-loader!./src/app/about/about.component.ts:29,0]

ERROR in main.7ef34497f05b466f628b.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/angular2-template-loader!./src/app/app.component.ts:61,0]
`

  • What is the expected behavior?
    To uglify the main.[hash].bundle.js
  • What is the motivation / use case for changing the behavior?
  • Please tell us about your environment:
    Mac OS X El Capitan
  • Angular version: 2.0.0-beta.X
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Activity

  1. StefH commented on Aug 26, 2016

    @StefH
    StefH
    on Aug 26, 2016
    Contributor

    I changed the tsconfig.json - target: "es6" because it's not recognizing "Set" and others es6

    I encounter the same issue when including a 3rd party library which is build in es6.

  2. JoshTheDerf commented on Sep 8, 2016

    @JoshTheDerf
    JoshTheDerf
    on Sep 8, 2016

    I can reproduce this as well.

  3. LanderBeeuwsaert commented on Sep 9, 2016

    @LanderBeeuwsaert
    LanderBeeuwsaert
    on Sep 9, 2016

    Same here. Setting target to es5 works as workaround.

  4. DutchKevv commented on Dec 2, 2016

    @DutchKevv
    DutchKevv
    on Dec 2, 2016

    Installing the npm package: typescript@rc and setting the target: "es5" in tsconfig.json solved it for me..

    Problem was I couldn't use target: "es5" before because my project is using async / await.. But with the new 2.1 version of Typescript it is supported

  5. manh-vv commented on Dec 4, 2016

    @manh-vv
    manh-vv
    on Dec 4, 2016

    I've got the same issue when trying to change target to ES6.

  6. rvalimaki commented on Jan 19, 2017

    @rvalimaki
    rvalimaki
    on Jan 19, 2017

    Confirming this as well. I am using ES6 target for async/await support, and that causes UglifyJS to fail. Setting ES5 target with Typescript 2.0.10 breaks the async/await... So I'm between a rock and a hard place here.

    I'm trying to get things working with newer Typescript.

  7. rvalimaki commented on Jan 19, 2017

    @rvalimaki
    rvalimaki
    on Jan 19, 2017

    "I'm trying to get things working with newer Typescript."

    Build works with Typescript 2.1.5 & ES5 Target BUT async/await doesn't work!

    "__generator is not defined"

    __generator is part of async/await code generated by Typescript when the target is ES5 or ES3.

    Disabling UglifyJS completely allows production builds with ES6 target, so that's what I'm currently doing as a workaround. Might still test ES5 target with manually copy & pasted __generator and __awaiter from https://blog.mariusschulz.com/2016/12/09/typescript-2-1-async-await-for-es3-es5

  8. manh-vv commented on Jan 19, 2017

    @manh-vv
    manh-vv
    on Jan 19, 2017

    I found a solution by using babel. ES6 Typescript -> JavaScript es6 -> babel -> es5.

  9. rvalimaki commented on Jan 19, 2017

    @rvalimaki
    rvalimaki
    on Jan 19, 2017

    Workaround with TS 2.1 & ES5 target without babel is to copy & paste __generator & __awaiter vars to index.html or other place to be included on global scope. I tested it and it's indeed working.

    Get the code from the following link:

    https://blog.mariusschulz.com/2016/12/09/typescript-2-1-async-await-for-es3-es5

    Feels a bit dirty but works. Honestly, I think that using babel with TS would be even bigger sin.

  10. sijixx commented on Jan 28, 2017

    @sijixx
    sijixx
    on Jan 28, 2017

    please i keep getting this error, how can i resolve this??

    Error: No errors
    at validate (C:\Users\Adebowale\myauthapp\node_modules\extract-text-webpack-plugin\schema\validator.js:10:9)
    at Function.ExtractTextPlugin.extract (C:\Users\Adebowale\myauthapp\node_modules\extract-text-webpack-plugin\index.js:188:3)
    at C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-build-styles.js:79:83
    at Array.map (native)
    at Object.getWebpackStylesConfig (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-build-styles.js:76:43)
    at new NgCliWebpackConfig (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-config.js:44:51)
    at Class.run (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\tasks\serve-webpack.js:23:22)
    at C:\Users\Adebowale\myauthapp\node_modules\angular-cli\commands\serve.run.js:37:22
    at process._tickCallback (internal/process/next_tick.js:103:7)

  11. LeeGenD commented on Feb 9, 2017

    @LeeGenD
    LeeGenD
    on Feb 9, 2017

    UglifyJsPlugin only supports es5 now, so change file tsconfig.json like below:

    {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es6"]
  }
}

    this config will make build program solve this problem like SyntaxError: Unexpected token: name (App) ,and also be able to recognize "Set" and others es6.

  12. Piusha commented on May 12, 2017

    @Piusha
    Piusha
    on May 12, 2017

    https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

  13. PatrickJS
    closed this as completedon Sep 2, 2017

  14. yehorrudytsia commented on Dec 17, 2020

    @yehorrudytsia
    yehorrudytsia
    on Dec 17, 2020

    Looks like fixed. Ive just removed all the ts files from my project

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions