The Broccoli Plugin: [UglifyWriter] failed with

Question

I've had this error for 2 weeks now while trying to build an ember app in production. Building it in dev environment works fine. I also realized that disabling minifyJs in ember-cli-build prevents the error but then, the app gets stuck at loading in the browser, and in the console, I see another error: "could not import ember-resolver".

My guess is that this is as a result of the UglifyWriter not understanding some code somewhere.

The full error is:

Build failed. File: assets/vendor.js (95443:4) The Broccoli Plugin: [UglifyWriter] failed with: Error at new JS_Parse_Error (eval at (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), :1545:18)

at js_error (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:1553:11)

at croak (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2092:9)

at token_error (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2100:9)

at unexpected (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2106:9)

at semicolon (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2126:56)

at simple_statement (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2317:73)

at eval (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2186:19)

at eval (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2139:24)

at block_ (eval at <anonymous> (/home/larisoft/frontend/node_modules/uglify-js/tools/node.js:1:1), <anonymous>:2432:20)

The broccoli plugin was instantiated at: at UglifyWriter.Plugin (/home/larisoft/frontend/node_modules/broccoli-plugin/index.js:7:31)

at new UglifyWriter (/home/larisoft/frontend/node_modules/broccoli-uglify-sourcemap/index.js:25:10)

at UglifyWriter (/home/larisoft/frontend/node_modules/broccoli-uglify-sourcemap/index.js:20:12)

at Class.postprocessTree (/home/larisoft/frontend/node_modules/ember-cli-uglify/index.js:15:50)

at /usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:543:27
at Array.forEach (native)

at EmberApp.addonPostprocessTree (/usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:541:23)

at EmberApp.toTree (/usr/local/lib/node_modules/ember-cli/lib/broccoli/ember-app.js:1667:15)

at module.exports (/home/larisoft/frontend/ember-cli-build.js:37:16)

at Class.setupBroccoliBuilder (/usr/local/lib/node_modules/ember-cli/lib/models/builder.js:70:19)

my package.json

{
"name": "hospitalrun",
"version": "0.9.12",
"description": "Ember front end for HospitalRun",
"homepage": "http://curacel.co",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "./script/build",
"start": "./script/server",
"test": "snyk test && ./script/test"
},
"repository": {
"type": "git",
"url": "[email protected]:HospitalRun/hospitalrun-frontend"
},
"engines": {
"node": ">= 0.10.0"
},
"author": "John Kleinschmidt",
"contributors": [
"Joel Worrall",
"Joel Glovier"
],
"license": "GPL-3.0",
"devDependencies": {
"body-parser": "^1.14.2",
"broccoli-asset-rev": "^2.4.1",
"broccoli-export-text": "0.0.2",
"broccoli-funnel": "^1.0.1",
"broccoli-manifest": "0.0.7",
"broccoli-merge-trees": "^1.0.0",
"broccoli-serviceworker": "0.1.0",
"ember-ajax": "2.3.2",
"ember-cli": "^2.4.1",
"ember-cli-active-link-wrapper": "0.2.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-content-security-policy": "0.5.0",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-deprecation-workflow": "0.2.2",
"ember-cli-fake-server": "0.3.1",
"ember-cli-htmlbars": "^1.0.7",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-qunit": "^2.0.0",
"ember-cli-release": "1.0.0-beta.1",
"ember-cli-sass": "^5.2.1",
"ember-cli-scss-lint": "1.0.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.4.0",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-font-awesome": "2.1.1",
"ember-i18n": "4.2.1",
"ember-load-initializers": "^0.5.0",
"ember-pouch": "^3.1.0",
"ember-rapid-forms": "1.0.0-beta4",
"ember-resolver": "^2.0.3",
"ember-select-list": "0.9.5",
"ember-simple-auth": "^1.1.0-beta.3",
"ember-simple-auth-registration": "1.0.2",
"ember-suave": "2.0.1",
"ember-truth-helpers": "1.2.0",
"ember-validations": "2.0.0-alpha.4",
"express": "^4.8.5",
"glob": "^7.0.0",
"hospitalrun-dblisteners": "0.9.2",
"hospitalrun-server-routes": "0.9.7",
"loader.js": "^4.0.7",
"nano": "6.2.0",
"request": "2.72.0"
},
"dependencies": {
"ember-cli-babel": "^5.1.5",
"ember-cli-uglify": "^1.2.0",
"ember-radio-buttons": "^4.0.1",
"ember-resolver": "^2.1.0",
"snyk": "^1.14.1",
"sw-toolbox": "^3.1.1",
"uglify-js": "^2.7.4"
},
"ember-addon": {
"paths": [
  "lib/pouch-fixtures"
]
}

}

My ember-cli-build:

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
    // Add options here
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('vendor/pouchdb-list/pouchdb-list.js');
app.import('bower_components/node-uuid/uuid.js');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/JsBarcode/CODE128.js');
app.import('bower_components/JsBarcode/JsBarcode.js');
app.import('vendor/dymo/DYMO.Label.Framework.1.2.6.js');
app.import('bower_components/moment/moment.js');
app.import('bower_components/typeahead.js/dist/typeahead.bundle.js');
app.import('bower_components/pikaday/pikaday.js');
app.import('bower_components/filer.js/src/filer.js');
app.import('bower_components/idb.filesystem/src/idb.filesystem.js');
app.import('bower_components/pikaday/css/pikaday.css');
app.import('vendor/octicons/octicons/octicons.css');

app.import('bower_components/pouchdb-load/dist/pouchdb.load.js');
app.import('bower_components/pouchdb/dist/pouchdb.memory.js');

return app.toTree();

};

Answer 1

It seems like uglify.js has some problems with ES6 files: https://forum.ionicframework.com/t/uglifyjs-fails-with-js-parse-error-error-but-no-stack-trace/66094. In my case it was enough to downgrade one library (fold-to-ascii) to an ES5 version.

Unfortunately, an error message isn't very helpful, so finding the problematic file is unnecessarily difficult. It's hard to tell which file causes the error in Your case, but I can at least say what helped me.

I manually put a log (with help from http://discuss.emberjs.com/t/debugging-failures-in-uglifyjs/7390/6):

function js_error(message, filename, line, col, pos) {
    console.log(`message: ${message} / filename: ${filename} / line: ${line}`);
    throw new JS_Parse_Error(message, filename, line, col, pos);
};

into js_error function of node_modules/uglify-js/lib/parse.js (line 205 in my case), and got a message that was actually helpful:

message: SyntaxError: Unexpected token: name (ASCIIFolder) / file: 0 / line: 64911 / position: 2070881

Then, with the find in path search on text "ASCIIFolder", I was able to locate the problematic files.

Also it may be necessary to do 'clean' install of npm and bower packages (https://emberigniter.com/update-latest-ember-data-cli/):

npm cache clean && bower cache clean
rm -rf node_modules bower_components dist tmp
npm install
bower install

---

Alternatively You can completely disable minifying of vendor.js with [https://ember-cli.com/asset-compilation#exclude-from-minification] (although it's not the greatest solution):

// ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    minifyJS: {
      options: {
        exclude: ["**/vendor.js"]
      }
    }
  });

  //...
  return app.toTree();
};

which tells broccoli-uglify-sourcemap to ignore vendor.js and, therefore, should prevent an error from happening.

Answer 2

I was tired of such errors, so I replaced uglify-js with upglify-es. Using yarn and ember-cli:

yarn upgrade [email protected]

Answer 3

UPDATE:

If you are not supporting IE9 browsers then you can use [email protected] stable release for minification.

---

uglifyjs has problem in minifying the newer ES features, you can use ember-cli-babili to minify the javascript babili in Ember-CLI.

npm uninstall --save-dev ember-cli-uglify
npm install --save-dev ember-cli-babili

I am using it my app. It's mentioned by RWJBlue in his blog(http://rwjblue.com/2017/04/21/ember-cli-targets/)