Ckeditor5: Adding ckeditor as a dependency in my project breaks uglify

[stnor]

"@ckeditor/[email protected]",
Adding ckeditor as a dependency in my project breaks uglify.

import CkEditor from "@ckeditor/ckeditor5-build-classic";

Build error:

Running "uglify:dist" (uglify) task
{ SyntaxError: Unexpected character '`'
  at JS_Parse_Error.get (<anonymous>:86:23)
  at formatError (util.js:646:15)
  at formatValue (util.js:552:18)
  at inspect (util.js:185:10)
  at exports.format (util.js:71:24)
  at Console.log (console.js:43:37)
  at /Users/stnor/devel/src/nomp/web/src/main/webapp/admin/node_modules/grunt-contrib-uglify/tasks/uglify.js:150:17

[stnor]

Uglify doesn't speak ES6. Shouldn't the distro be transpiled to ES5 with babel?

[Reinmar]

Yep, the problems is Uglify, unfortunately.

We had ES5 builds for some time but later we removed them after we understood that in all browsers which we support you can run CKEditor 5's native ES6 version.

We later discussed bringing them back in https://github.com/ckeditor/ckeditor5-build-classic/issues/24. The problem with ES5 builds is, though, that they are much bigger.

BTW, you know that there's UglifyJS2 and babel-minify which both support ES6? There's also a guide on how to build CKEditor 5 to ES5 but I rather recommend one of the more modern minifiers.

[stnor]

Ok, thanks. Make sense.
Can't be bothered to make major updates to toolchain at this point, so I upgraded to
"grunt-contrib-uglify": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
Work fine and I don't need ie11 support on this backoffice app anyway.

[vedmant]

I have the same problem, it looks like I just need to downgrade to previous version, ckeditor5 is too immature.

[Reinmar]

Sorry to hear that. Please remember that CKEditor 5 is in its early alpha version so some things require polish. Besides, here the problem is a lack of support for ES6 in Uglify which is something that many developers hit every day and which is resolved by UlgifyJS2 and babel-minify. Unfortunately, not every project/framework upgraded to those minifiers yet, but it's happening and once we'll hit 1.0.0 the situation will definitely look better. It actually looked a lot worse when we've been starting 2-3 years ago so there's already a lot of progress.

[jozsefsallai]

Had same issue with Webpack. For anyone dealing with this problem in webpack, the way I solved it was adding this as a dev dependency in my package.json:

"uglifyjs-webpack-plugin": "v1.0.0-beta.1"

and then calling it explicitly in the webpack config:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // other configs
  plugins: [
    new UglifyJsPlugin()
  ]
};

[sunfeng90]

I use webpack, but got Unexpected character '' [./node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js:5,8343][static/js/vendor.e6a2d835328dd570551a.js:101593,8310]`.

[sunfeng90]

@jozsefsallai works for me. Thanks a lot!

[Reinmar]

Let me add that we've migrated from webpack 3 to webpack 4 (and it requires actions on your side if you're upgrading CKEditor 5 to v11.0.0). But once you'll do that on your side you should not see any errors as the latest version of uglifyjs-webpack-plugin which is (by default) installed with the latest version of webpack, is able to minifiy CKEditor 5 without any issues.

You can find more information in https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html#option-minifying-javascript