Importing @ckeditor/ckeditor5-build-classic breaks @babel/preset-env

[Livijn]

As the title suggests, whenever I import the @ckeditor/ckeditor5-build-classic it breaks my application after running babel with @babel/preset-env.

The generated file starts with this line var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));. It seems like it is double parsing it or something, I'm not sure. But when I comment out that part the app.es5.js is working.

I am using Laravel Mix with webpack and babel like this:

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .babel(['public/js/app.js', 'public/js/vendor.js'], 'public/js/app.es5.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/pdf.scss', 'public/css')
    .version();

I am importing the build like this: import ClassicEditor from "@ckeditor/ckeditor5-build-classic"

[Livijn]

For now I created a mixin that loads the script dynamically from the CDN.

export default {
    methods: {
        loadScript(src, callback = null) {
            let script = document.createElement('script');
            script.setAttribute('src', src);
            script.addEventListener('load', callback);
            document.head.appendChild(script)
        },
    }
}

Then I use it like this, along with a v-if="editor" on the <ckeditor>

created() {
    this.loadScript('https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js', _ => {
        this.editor = window.ClassicEditor;
    })
},

[Mgsy]

Hello, please take a look at our guide about integrating CKEditor 5 with Vue.js. Does it solve your problem?

[Livijn]

No, since I need support for IE 11. I was using https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-es6-modules before.

[ma2ciek]

Bear in mind that CKEditor 5 doesn't run on IE11. If you're interested in this topic please vote there or leave a note, we're experimenting with it a little now.

[Livijn]

Ok, then we can close this.