Skip to content

Error transforming bundle with 'uglify' plugin #13

New issue
New issue
Closed
Closed
Error transforming bundle with 'uglify' plugin#13
@ammar91

Description

@ammar91
ammar91
opened on Oct 11, 2016

I have an Angular 2 sample app that's bundle up with Rollup, but it throws an error when using this plugin. It says

Error transforming bundle with 'uglify' plugin: SyntaxError: Unexpected token: name (AppComponent).

This is how my rollup.config.s looks like


import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';

export default {
    entry: 'dist/app/main.js',
    dest: 'dist/build.js', // output a single application bundle
    sourceMap: false,
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            namedExports: {
                // left-hand side can be an absolute path, a path 
                // relative to the current directory, or the name 
                // of a module in node_modules 
                'node_modules/primeng/primeng.js': ['DialogModule']
            },
            include: ['node_modules/rxjs/**', 'node_modules/primeng/**']
        }),
        uglify()
    ]
}

Activity

ds8k

ds8k commented on Nov 30, 2016

@ds8k
ds8k
on Nov 30, 2016

Having the same issue, were you able to resolve this?

TrySound

TrySound commented on Nov 30, 2016

@TrySound
TrySound
on Nov 30, 2016
Owner

I guess that's because of es2015 in dependencies code. Uglify supports only es5.

mattpilott

mattpilott commented on Dec 8, 2016

@mattpilott
mattpilott
on Dec 8, 2016

I also have this. My config is as follows, I am using the harmony branch though.

// Rollup plugins
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-js';

export default {
    entry: './app/scripts/framework/framework.js',
    dest: './app/scripts/framework/framework.min.js',
    format: 'iife',
    moduleName: 'UIKit',
    moduleContext: {
        './app/scripts/framework/parties/promise.js' : 'window',
        './app/scripts/framework/parties/fetch.js' : 'window'
    },
    plugins: [
        babel({
            exclude: ['./node_modules/**', './app/scripts/framework/parties/**'],
            "presets": [[
                "env", {
                    "targets": {
                        "chrome": 52
                    },
                    "modules": false
                }
            ]],
            "plugins": [
                "external-helpers"
            ]
        }),
        uglify({}, minify)
    ]
};

I get this error Error transforming bundle with 'uglify' plugin: SyntaxError: Unexpected token: operator (>)

Any help is much appreciated

dotnetCarpenter

dotnetCarpenter commented on Dec 13, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 13, 2016

@TrySound Can you elaborate on how to, use the UglifyJS harmony branch by passing its minify function to minify your code, described in https://github.com/TrySound/rollup-plugin-uglify#warning?
It doesn't work out of the box.

TrySound

TrySound commented on Dec 14, 2016

@TrySound
TrySound
on Dec 14, 2016
Owner

@dotnetCarpenter What's exactly doesn't work?

dotnetCarpenter

dotnetCarpenter commented on Dec 14, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 14, 2016

@TrySound Uglify is not able to minify because of the es2015 syntax, when using the work-around, out of the box. I think we're all a bit clueless to how we can use the harmony branch of uglify-js. Well, maybe not @matt3224 but I for one don't know how to install a branch of a npm module.

import uglify from 'rollup-plugin-uglify'
import { minify } from 'uglify-js'
...
export default {
    entry: "js/src/main.js",
    plugins: [
        babel(babelrc()),
        uglify({}, minify)

Running the above through rollup gives me:

npm run rollup -- --config rollup.main.js

> timetracker-frontend@1.0.0 rollup /var/www/xmaspeer/timetracker/public
> rollup "--config" "rollup.main.js"

Compiling source to execute on chrome 55, firefox 50, safari 10
Treating 'app' as external dependency
Error transforming bundle with 'uglify' plugin: SyntaxError: Unexpected token: operator (>)
Error
    at new JS_Parse_Error (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1547:18)
    at js_error (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1555:11)
    at croak (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2094:9)
    at token_error (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2102:9)
    at unexpected (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2108:9)
    at expr_atom (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2635:9)
    at maybe_unary (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2797:19)
    at expr_ops (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:24)
    at maybe_conditional (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2837:20)
    at maybe_assign (eval at <anonymous> (/var/www/xmaspeer/timetracker/public/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2861:20)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki

My .babelrc look like this (I also use env preset to only transpile the code that is not supported by my target browsers):

{
  "presets": [
    ["env",
    {
      "debug": false,
      "targets": {
        "browsers": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "modules": false
    }]
  ],
  "plugins": [
    "external-helpers"
  ]
}

OS: Ubuntu 16.04 (Linux 4.4.0-53-generic)
node: v7.2.1
npm: 3.10.10

TrySound

TrySound commented on Dec 14, 2016

@TrySound
TrySound
on Dec 14, 2016
Owner

npm i mishoo/UglifyJS2#harmony

dotnetCarpenter

dotnetCarpenter commented on Dec 14, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 14, 2016

@matt3224 @TrySound At first it didn't work after installing mishoo/UglifyJS2#harmony. I had to manually delete the uglify-js folder and then install again. Now it works! 💃

dotnetCarpenter

dotnetCarpenter commented on Dec 14, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 14, 2016

@TrySound Perhaps you should update the README with this as it's not apparent.

TrySound

TrySound commented on Dec 14, 2016

@TrySound
TrySound
on Dec 14, 2016
Owner

@dotnetCarpenter PR welcome.

mattpilott

mattpilott commented on Dec 14, 2016

@mattpilott
mattpilott
on Dec 14, 2016 · edited by mattpilott

Just a quick update from me, I have this working now which is awesome, since installing the harmony branch via the npm i mishoo/UglifyJS2#harmony

@dotnetCarpenter i think its better to use either npm un uglify-js or npm uninstall uglify-js rather than deleting the folder manually 👍

Shyam-Chen

Shyam-Chen commented on Dec 15, 2016

@Shyam-Chen
Shyam-Chen
on Dec 15, 2016 · edited by Shyam-Chen

same here

Error transforming bundle with 'uglify' plugin: SyntaxError: Invalid syntax: 0a.h

OS: Windows 10

TrySound
closed this as completedon Dec 15, 2016
dotnetCarpenter

dotnetCarpenter commented on Dec 15, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 15, 2016 · edited by dotnetCarpenter

@matt3224 I am using yarn and since uglify-js isn't in my dependency list but is a dependency of rollup-plugin-uglify, yarn won't let me uninstall uglify-js. Unfortunately, yarn add --dev mishoo/UglifyJS2#harmony does not install the correct branch, it just does nothing but report back everything is ok. I did a git diff between the two uglify-js branches and then looked into the uglify-js folder to see if I had any of the differences, when I found none, I deleted the folder and did yarn add mishoo/UglifyJS2#harmony to get the correct version.

If I remember correctly, then npm un uglify-js just delete the uglify-js folder and update your package.json if you have it there. So a manual delete should be the same.

When I yarn add mishoo/UglifyJS2#harmony, without having uglify-js in node_modules/, the correct version of uglify-js will be installed. Had I done that initially, it might had work out from the beginning... But it's untested. E.g. yarn add --dev rollup-plugin-uglify mishoo/UglifyJS2#harmony might work.

TrySound

TrySound commented on Dec 15, 2016

@TrySound
TrySound
on Dec 15, 2016
Owner

Report an issue in yarn.

dotnetCarpenter

dotnetCarpenter commented on Dec 15, 2016

@dotnetCarpenter
dotnetCarpenter
on Dec 15, 2016

@TrySound I know. But I'm pressed on time the next two weeks and got a lot of other priorities on my plate. I'll have to wait. But at least now, I'm not the only one with this information. ;)

TrySound

TrySound commented on Dec 15, 2016

@TrySound
TrySound
on Dec 15, 2016
Owner

You may always use npm again.

dotnetCarpenter
mentioned this on Dec 15, 2016
jonataswalker

jonataswalker commented on Dec 20, 2016

@jonataswalker
jonataswalker
on Dec 20, 2016

For me what it worked was:

{
  "devDependencies": {
    "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony"
  }
}

Instead of:

npm i mishoo/UglifyJS2#harmony
piotr-cz

piotr-cz commented on Dec 28, 2016

@piotr-cz
piotr-cz
on Dec 28, 2016

This worked for me:

npm uninstall --save-dev uglify-js
npm install --save-dev mishoo/UglifyJS2#harmony
unional
mentioned this on Jan 13, 2017
aviddiviner

aviddiviner commented on Jul 10, 2017

@aviddiviner
aviddiviner
on Jul 10, 2017

Just a note to anyone coming to this issue a few months later. That harmony branch has moved on quite a bit since it worked, so rather use the harmony-v2.8.0 tag, which is from around the time the last comments were made.

So, either

{"devDependencies": {"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.0"}}

Or

npm install --save-dev mishoo/UglifyJS2#harmony-v2.8.0
TrySound

TrySound commented on Jul 10, 2017

@TrySound
TrySound
on Jul 10, 2017
Owner

@aviddiviner harmony branch is released now as uglify-es

dotnetCarpenter

dotnetCarpenter commented on Jan 1, 2018

@dotnetCarpenter
dotnetCarpenter
on Jan 1, 2018

@TrySound I think you can safely close this issue as you have it documented in https://github.com/TrySound/rollup-plugin-uglify#warning

dotnetCarpenter

dotnetCarpenter commented on Jan 1, 2018

@dotnetCarpenter
dotnetCarpenter
on Jan 1, 2018

Or even better, switch to use uglify-es instead of uglify-js as a dependency.

LuisSevillano

LuisSevillano commented on Apr 12, 2018

@LuisSevillano
LuisSevillano
on Apr 12, 2018

For me what it worked was uninstall the plugin and install it again.
Thanks!

TrySound

TrySound commented on Apr 12, 2018

@TrySound
TrySound
on Apr 12, 2018
Owner

@LuisSevillano yarn upgrade-interactive --latest

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

        Participants

        @dotnetCarpenter@piotr-cz@aviddiviner@mattpilott@ds8k

        Issue actions
          Error transforming bundle with 'uglify' plugin · Issue #13 · TrySound/rollup-plugin-uglify