Skip to content

ERROR in vendor... from UglifyJs Unexpected character '`' #5362

Closed

Description

@elvisbegovic

When I build or serve without AOT it works but when using --prod I get:

ERROR in vendor.8ebdc3713b6c81a2665a.bundle.js from UglifyJs
Unexpected character '`' [vendor.8ebdc3713b6c81a2665a.bundle.js:70273,25]

My tsconfig.json:

{"compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": ["es2016","dom"]}}

My tsconfig.app.json:

{"compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2016","dom"],
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "",
    "types": []},
  "exclude": ["test.ts","**/*.spec.ts"]}

Config:

@angular/cli: 1.0.0-rc.1
node: 6.9.2
os: win32 x64
@angular/common: 4.0.0-rc.2
@angular/compiler: 4.0.0-rc.2
@angular/core: 4.0.0-rc.2
@angular/forms: 4.0.0-rc.2
@angular/http: 4.0.0-rc.2
@angular/platform-browser: 4.0.0-rc.2
@angular/platform-browser-dynamic: 4.0.0-rc.2
@angular/router: 4.0.0-rc.2
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 4.0.0-rc.2

Activity

  1. elvisbegovic commented on Mar 13, 2017

    @elvisbegovic
    ContributorAuthor

    still here with rc.3

  2. Uwy commented on Mar 13, 2017

    @Uwy

    I think my error is related.
    When ng build --prod got:

    ERROR in vendor.baf468129a07792e2d2b.bundle.js from UglifyJs
    Unexpected token: operator (>) [vendor.baf468129a07792e2d2b.bundle.js:13281,19]
    

    System/Config info:

    node: v7.4.0
    npm: 4.0.5
    OS: win10x64
    CLI: CYGWIN_NT-10.0-WOW 1.7.35(0.287/5/3) 2015-03-04 12:07 i686 Cygwin
    
    ng --version:                                                                                                                                                    /cygdrive/d/RC/Applis/RCDoc/DocServer.Front 1
        _                      _                 ____ _     ___
       / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
      / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
     / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
    /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                   |___/
    @angular/cli: 1.0.0-rc.0
    node: 7.4.0
    os: win32 x64
    @angular/common: 2.4.9
    @angular/compiler: 2.4.9
    @angular/core: 2.4.9
    @angular/forms: 2.4.9
    @angular/http: 2.4.9
    @angular/platform-browser: 2.4.9
    @angular/platform-browser-dynamic: 2.4.9
    @angular/router: 3.4.9
    @angular/cli: 1.0.0-rc.0
    @angular/compiler-cli: 2.4.9
    
    
    

    /package.json:

      "dependencies": {
        "@angular/common": "^2.4.7",
        "@angular/compiler": "^2.4.7",
        "@angular/core": "^2.4.7",
        "@angular/forms": "^2.4.7",
        "@angular/http": "^2.4.7",
        "@angular/platform-browser": "^2.4.7",
        "@angular/platform-browser-dynamic": "^2.4.7",
        "@angular/router": "^3.4.7",
        "@types/highlight.js": "^9.1.9",
        "angular2-materialize": "^6.7.0",
        "babel-polyfill": "^6.23.0",
        "code-mirror-themes": "^1.0.0",
        "codemirror": "^5.24.2",
        "core-js": "^2.4.1",
        "font-awesome": "^4.7.0",
        "hammerjs": "^2.0.8",
        "highlight.js": "^9.10.0",
        "jquery": "^2.2.4",
        "jquery-ui": "^1.12.1",
        "markdown-it": "^8.3.1",
        "markdown-it-abbr": "^1.0.4",
        "markdown-it-anchor": "^4.0.0",
        "markdown-it-container": "^2.0.0",
        "markdown-it-deflist": "^2.0.1",
        "markdown-it-emoji": "^1.3.0",
        "markdown-it-fontawesome": "^0.2.0",
        "markdown-it-footnote": "^3.0.1",
        "markdown-it-ins": "^2.0.0",
        "markdown-it-mark": "^2.0.0",
        "markdown-it-mathjax": "^2.0.0",
        "markdown-it-sub": "^1.0.0",
        "markdown-it-sup": "^1.0.0",
        "markdown-it-table-of-contents": "^0.3.2",
        "materialize-css": "^0.98.0",
        "ng-dynamic": "^2.0.0",
        "ng2-codemirror": "^1.1.1",
        "oidc-client": "^1.3.0-beta.2",
        "perfect-scrollbar": "^0.6.16",
        "rxjs": "^5.1.0",
        "typescript-dotnet-commonjs": "^4.8.0",
        "zone.js": "^0.7.8"
      },
      "devDependencies": {
        "@angular/cli": "^1.0.0-rc.0",
        "@angular/compiler-cli": "^2.4.7",
        "@types/jasmine": "^2.5.44",
        "@types/jquery": "^2.0.40",
        "@types/jquery.ui.layout": "0.0.28",
        "@types/jqueryui": "^1.11.32",
        "@types/markdown-it": "0.0.2",
        "@types/materialize-css": "^0.98.0",
        "@types/mathjax": "0.0.31",
        "@types/node": "^7.0.8",
        "codelyzer": "~2.0.0",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.0.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.0",
        "ts-node": "^2.1.0",
        "tslint": "^4.3.1",
        "typescript": "^2.2.1"
      }

    /.angular-cli.json:

    {
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [        
            "styles.scss"
          ],
          "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/hammerjs/hammer.js",
            "../vendors/jquery-ui-1.12.1.custom/jquery-ui.js",
            "../node_modules/materialize-css/dist/js/materialize.js"
          ],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "lint": [
        {
          "project": "src/tsconfig.app.json"
        },
        {
          "project": "src/tsconfig.spec.json"
        },
        {
          "project": "e2e/tsconfig.e2e.json"
        }
      ],
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "scss",
        "component": {}
      }
    }

    /tsconfig.json:

    {
      "compileOnSave": false,
      "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "strictNullChecks": true,
        "target": "es5",
        "lib": [
          "es2016"
        ],
        "types": [
          "./src/typings.d.ts",
          "./typings/index.d.ts"      
        ]
      }
    }

    /src/tsconfig.app.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "strictNullChecks": true,
        "lib": [
          "es2016",
          "dom"
        ],
        "outDir": "../out-tsc/app",
        "target": "es5",
        "module": "es6",
        "baseUrl": "",
        "types": [
          "./typings.d.ts",
          "../typings/index.d.ts"
        ]
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

    Everything works fine without the --prod flag. Making a quick repro with the same imported vendors doesn't reproduce the error so it seems related to local/app code.

    Edit: Still happens with @angular/cli: 1.0.0-rc.2

  3. elvisbegovic commented on Mar 13, 2017

    @elvisbegovic
    ContributorAuthor

    I dont understand why uglifyjs can't parse this character while targeting es5

    In my code yes I use this chatacter through my app but donno why getting this error

  4. Uwy commented on Mar 13, 2017

    @Uwy

    I don't either but I think it is related to how some TPL are compiled.
    I just wish to see where it breaks in a file or in console, somewhere but can't find a flag for the cli to output intermediate files.

  5. elvisbegovic commented on Mar 13, 2017

    @elvisbegovic
    ContributorAuthor

    +1 for add flag to show temp folder while build instead in memory ir solve this issue plz!

  6. elvisbegovic commented on Mar 14, 2017

    @elvisbegovic
    ContributorAuthor

    Update

    This issue can be closed for my part because it's my fault I wanted fix by myself this issue angular/angular#14865

    So in platform-browser.es5.js
    I change temporarily this function

    DefaultDomRenderer2.prototype.setAttribute = function (el, name, value, namespace) {
            if (namespace) {
                el.setAttributeNS(NAMESPACE_URIS[namespace], namespace + ':' + name, value);
            }
            else {
                el.setAttribute(name, value);
            }
        };
    

    into this with :

    DefaultDomRenderer2.prototype.setAttribute = function (el, name, value, namespace) {
            if (namespace) {
              const attrNs = NAMESPACE_URIS[namespace];
              const attrName = `${namespace}:${name}`;
              if (attrNs) {
                el.setAttributeNS(attrNs, attrName, value);
              } else {
                el.setAttribute(attrName, value);
              }
            }
            else {
                el.setAttribute(name, value);
            }
        };
    

    with `${namespace}:${name}` instead namespace + ':' + name;

    I did this because my app didn't work coz of this empty namespace issue , I highly wait merge this fix into master because can't build, actually I get:

     Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.
    EXCEPTION: Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.
    EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute 
    ...
    

    cc @hansl

    PS: now I'm happy, I succeed build using prod and aot and ng4 to make us of new ViewEngine but too dissapointed, everybody (on twitter) speakin about size reduce and as if by chance it does not work to me :D :D if someone can help, get a look : on my SO question

  7. Uwy commented on Mar 14, 2017

    @Uwy

    Did uninstall every global package then reinstalling ng-cli both globally and locally without success.
    Did try different version of typescript: 2.2.1, 2.1.6 and 2.0.3, only introduced more issues (my code is using the latest import styles and async/await keywords)
    Cleaning cache/node modules didn't change anything

    I am hoping my issue get resolved until I have to push my project in prod.

  8. SamVerschueren commented on Mar 16, 2017

    @SamVerschueren

    I had the same issue with the unexpected > token. It took me almost an entire day to figure out what caused this. I was using a dependency which used ES2016 features like fat arrow functions, template strings, const, ... So I downgraded my dependency to a version which was written in ES5 and it worked. Hope this helps!

  9. Uwy commented on Mar 16, 2017

    @Uwy

    Thanks @SamVerschueren I'll give it a try

  10. filipesilva commented on Mar 18, 2017

    @filipesilva
    Contributor

    Closing since @istiti said his original issue was solved in #5362 (comment)

  11. Uwy commented on Mar 21, 2017

    @Uwy

    I did find a workaround that does compile but I did not test it yet in production.

    I cloned the angular cli repo and changed the production.ts file like this:

    From 49e2390c7269779e772bc816b476bc42e11f31f8 Mon Sep 17 00:00:00 2001
    From: Uwy <uwy@live.fr>
    Date: Tue, 21 Mar 2017 12:03:53 +0100
    Subject: [PATCH 3/3] Use babili-plugin instead of UglifyJs
    
    ---
     package.json                                               |  1 +
     packages/@angular/cli/models/webpack-configs/production.ts | 10 ++++++++--
     2 files changed, 9 insertions(+), 2 deletions(-)
    
    diff --git a/package.json b/package.json
    index f5ffb66..eb747f5 100644
    --- a/package.json
    +++ b/package.json
    @@ -126,6 +126,7 @@
         "@types/semver": "^5.3.30",
         "@types/source-map": "^0.5.0",
         "@types/webpack": "^2.2.4",
    +    "babili-webpack-plugin": "0.0.11",
         "chai": "^3.5.0",
         "conventional-changelog": "^1.1.0",
         "dtsgenerator": "^0.9.1",
    diff --git a/packages/@angular/cli/models/webpack-configs/production.ts b/packages/@angular/cli/models/webpack-configs/production.ts
    index 1e5b291..0bd76b9 100644
    --- a/packages/@angular/cli/models/webpack-configs/production.ts
    +++ b/packages/@angular/cli/models/webpack-configs/production.ts
    @@ -2,6 +2,8 @@ import * as path from 'path';
     import * as webpack from 'webpack';
     import * as fs from 'fs';
     import * as semver from 'semver';
    +import * as BabiliPlugin from 'babili-webpack-plugin';
    +console.log(BabiliPlugin);
     import { stripIndent } from 'common-tags';
     import { StaticAssetPlugin } from '../../plugins/static-asset';
     import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
    @@ -86,11 +88,15 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
             'process.env.NODE_ENV': JSON.stringify('production')
           }),
           new (<any>webpack).HashedModuleIdsPlugin(),
    -      new webpack.optimize.UglifyJsPlugin(<any>{
    +      new BabiliPlugin({
    +        // Eventually this could be done but didn't find the use yet
    +        // useSourceMap:  buildOptions.sourcemaps
    +      })
    +      /*new webpack.optimize.UglifyJsPlugin(<any>{
             mangle: { screw_ie8: true },
             compress: { screw_ie8: true, warnings: buildOptions.verbose },
             sourceMap: buildOptions.sourcemaps
    -      })
    +      })*/
         ].concat(extraPlugins)
       };
     };
    -- 
    2.8.3

    If anyone encounter this issue and still want to use somekind of minifying, I joined the git format-patch from the current master to my current status.

    angular-cli-patch-babili.zip

    Just use it like git apply 0003-Use-babili-plugin-instead-of-UglifyJs.patch

    (You might want to use the other patchs beforehand to remove some useless warnings I found)

    I'm not bothering to make a PR for this as my use case is rather extreme, feel free to do it if you judge it necessary.

  12. adeelibr commented on Jun 10, 2017

    @adeelibr

    Following +1
    I am having the same issue.

  13. 27leaves commented on Jun 12, 2017

    @27leaves

    same for me +1

  14. codelovesme commented on Jun 22, 2017

    @codelovesme

    same here +1

    "@angular/cli": "1.1.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",

  15. SamVerschueren commented on Jun 22, 2017

    @SamVerschueren

    It's because you install dependencies which use ES2016 features like template strings, fat arrow functions, etc. UglifyJS can't handle them and crashes.

    More information can be found in this thread sindresorhus/ama#446 as it discusses possible workarounds.

    I was tired of the entire discussion and created babel-engine-plugin which is a webpack plugin that only transpiles dependencies targetting Node.js >= 0.12. The only downside is that you'd have to eject your webpack config. Or Angular-CLI should embed it.

  16. codelovesme commented on Jun 22, 2017

    @codelovesme

    Thank you very much for your quick response,
    removing the es6 compiled libraries, It worked!

  17. misaunde commented on Sep 27, 2017

    @misaunde

    This may be a dumb question, but how do you remove the es6 compiled libraries?

  18. SamVerschueren commented on Sep 28, 2017

    @SamVerschueren

    @misaunde Depends on what library you are using. Most of the time you could install an older version of the library without losing functionality.

    The other solution is to eject from Angular-CLI and use something like babel-engine-plugin. However, this is not the recommended way.

  19. misaunde commented on Sep 28, 2017

    @misaunde

    Ok thanks! I ended up solving this by switching to angular-cli 1.5.0-beta.0 so I could target ES2015.
    (#7610)

  20. zhouchangshun commented on Nov 16, 2017

    @zhouchangshun

    ERROR in edit_page.90a9298d.min.js from UglifyJs
    Unexpected character '`' [../~/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5,839][edit_page.90a9298d.min.js:45500,806]

  21. zhouchangshun commented on Nov 16, 2017

    @zhouchangshun

    I have the same question,+1

  22. sunfeng90 commented on Jul 24, 2018

    @sunfeng90

    @zhouchangshun Have solve it?

  23. angular-automatic-lock-bot commented on Sep 8, 2019

    @angular-automatic-lock-bot

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  24. locked and limited conversation to collaborators on Sep 8, 2019
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

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions