Ckeditor5: Laravel mix custom build svg issue

[PayteR]

🐞 Bug report

Hi, im struggle with building of ckeditor5. When i build it with laravel-mix (webpack wrapper), then i can't get to work this build, i always see TypeError: svg is null.

💻 Version of CKEditor

+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- @ckeditor/[email protected]
+-- [email protected] extraneous

📋 Steps to reproduce

It's laravel installation with laravel-mix ^2.0, no custom configuration of webpack.mix.js. This is my code in app.js

    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
    import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
    import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
    import Image from '@ckeditor/ckeditor5-image/src/image';

    import Enter from '@ckeditor/ckeditor5-enter/src/enter';
    import Typing from '@ckeditor/ckeditor5-typing/src/typing';
    import Undo from '@ckeditor/ckeditor5-undo/src/undo';

let textarea = ....textarea object;

            ClassicEditor
                .create(textarea, {
                    plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Image ],
                    toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
                })
                .then(editor => {
                    console.log(editor);
                })
                .catch(error => {
                    console.error(error);
                });

✅ Expected result

Correct build

❎ Actual result

i got this error

TypeError: svg is null
Stack trace:
_updateXMLContent@http://domain.test/js/app.js:93873:10
render@http://domain.test/js/app.js:93849:3
decorate/<@http://domain.test/js/app.js:3169:17
fire@http://domain.test/js/app.js:2358:5
decorate/this[methodName]@http://domain.test/js/app.js:3173:11
ViewCollection/<@http://domain.test/js/app.js:36465:5
fire@http://domain.test/js/app.js:2358:5
add@http://domain.test/js/app.js:25792:3
render@http://domain.test/js/app.js:24281:4
decorate/<@http://domain.test/js/app.js:3169:17
fire@http://domain.test/js/app.js:2358:5
decorate/this[methodName]@http://domain.test/js/app.js:3173:11
_renderElementChildren@http://domain.test/js/app.js:37334:7
_renderElement@http://domain.test/js/app.js:37067:3
_renderNode@http://domain.test/js/app.js:37049:11
render@http://domain.test/js/app.js:36772:16
render@http://domain.test/js/app.js:4566:19
render@http://domain.test/js/app.js:96449:3
decorate/<@http://domain.test/js/app.js:3169:17
fire@http://domain.test/js/app.js:2358:5
decorate/this[methodName]@http://domain.test/js/app.js:3173:11
_createForm@http://domain.test/js/app.js:96148:3
init@http://domain.test/js/app.js:96090:3

📃 Other details that might be useful

Maybe it's related to this https://github.com/JeffreyWay/laravel-mix/issues/1397.

And another issue is with styles, that are not compiled, i used precompiled css styles, to quick fix that, but this is bigger issue.

Thank you for any help

[Reinmar]

Based on this:

v2 does not work... because laravel-mix use file-loader for SVG. And this can not be overridden.

I'd say that unless you'll be able to force laravel-mix to use the raw-loader for CKEditor 5's SVGs, you won't be able to integrate CKEditor 5 into your app in this way.

However, you shouldn't have any problems to use CKEditor 5 builds which are pre-compiled and all SVGs and CSSs are already included in the output ckeditor.js file. Such a build can be used without any special webpack configuration. In fact, you don't need webpack at all since this is an UMD type of build.

So, as the Advanced setup guide says:

Similar results to what this method allows can be achieved by customizing an existing build and integrating your custom build like in scenario 1. This will give faster build times (since CKEditor will be built once and committed), however, it requires maintaining a separate repository and installing the code from that repository into your project (e.g. by publishing a new npm package or using tools like Lerna). This makes it less convenient than the method described in this scenario.

You can still add/remove plugins when using a build, you just need to create a custom one. Unless you're integrating CKEditor 5 very closely into your app, this may be a more convenient solution.

[PayteR]

thank you @Reinmar, so when i need to use Markdown plugin https://docs.ckeditor.com/ckeditor5/latest/features/markdown.html i should just create some subfolder somewhere in my js files, setup there standard webpack build by Scenario2 https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/advanced-setup.html and after that include my builded ckeditor inside laravel mix?

[Reinmar]

Yes. Scenario 2, method 1 to be precise :).

Generally speaking, this will give you a very similar setup to the ones we use in the builds (e.g. https://github.com/ckeditor/ckeditor5-build-classic). The difference will be getting rid of build-config.js file which isn't necessary (it's there for people who aren't familiar with JS). Also, the builds are configured to produce UMD format and to minify the code.

[PayteR]

Hi again @Reinmar, im still struggle with this. I can compile my own build, but i can't include it in my project. How it's possible, that this works

import ClassicEditor from '../../../../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js'; 

but this not

 import ClassicEditor from '../ckeditor5-build-classic/ckeditor'; 

"export 'default' (imported as 'ClassicEditor') was not found in '../ckeditor5-build-classic/ckeditor'

It's same ckeditor.js file

[Reinmar]

There's no ckeditor5-build-classic/ckeditor.js file. It's always ckeditor5-build-classic/build/ckeditor.js.

[Reinmar]

Hm... I just recalled that there was ckeditor5-build-classic/ckeditor.js some time ago. Did you find it somewhere in the documentation? Maybe something's outdated.

[PayteR]

Sorry, that was the typo, but when path is correct, error is similar

import ClassicEditor from '../ckeditor5-build-classic/build/ckeditor';

"export 'default' (imported as 'ClassicEditor') was not found in '../ckeditor5-build-classic/build/ckeditor'

       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.94 MB       0  [emitted]  [big]  /js/app
/css/app.css   165 kB    0, 0  [emitted]         /js/app, /js/app

WARNING in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Wysiwyg.vue
22:24-37 "export 'default' (imported as 'ClassicEditor') was not found in '../ckeditor5-build-classic/build/ckeditor'
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Wysiwyg.vue
 @ ./resources/assets/js/components/Wysiwyg.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

content of that ckeditor.js file is same, i copied it from '../../../../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js'

[Reinmar]

I don't remember how webpack treats the UMD files when importing them using ES6's import. I can see that in the docs we have this:

// Using ES6 imports:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Or CJS imports:
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );

And I'm quite sure I checked that it works.

So, it's possible that:

• either it doesn't work and I haven't tested it or I tested it and something's changed,
• your setup (babel?) causes some issues.

BTW, the alternative import you could check is:

import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';

[PayteR]

Ok, i found problem in laravel-mix, on this line is babel setup

https://github.com/JeffreyWay/laravel-mix/blob/add84aac0eaa91ebdb896706e9b21f4db28d9b4a/src/components/JavaScript.js#L71

Here is excluded node_modules folder, thats why its work, when its loaded from node_modules folder. I dont want to setup my own fork repository and push it on npm, have you any clue, how to change this setup and exclude some other folders?

[Reinmar]

If you can't control webpack's config, then you could create a symlink from your node_modules/ckeditor5-build-custom to the directory where you keep this build.

[PayteR]

But that whould i need to create manualy? Or is there any cross platform package.json config trick to create it after npm install? I need to share my project with other devs.

[Reinmar]

I think that the most common way is to use npm scripts. It's an easy way to share some commands. If you'll call your script install, then it will be called automatically once someone does npm i in your app's directory.

[PayteR]

Thank you @Reinmar for your advices. In the end i compiled it separately from my core app.js, it's better anyway, because i need ckeditor just for logged users and just in some parts of the webpage. I hope laravel-mix will be fixed for overwriting rules soon. Closing issue.