Ckeditor5-react: Ejecting Create React App when building a file upload plugin with a custom build editor

[thtg88]

Hi guys,
I've recently started developing a file uploader plugin to integrate into a custom back-end and a Create React App front-end, and after updating to ckeditor5-core v12.1.0 I started getting an error logged to console (doesn't crash the app): ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules.
I understand this is because I'm using the ClassicEditor from the build-classic package instead from the custom build one. After then trying to create my own custom build I started having errors related to CKEditor's styling files: do you know if it's necessary to npm run eject in order to proceed and apply your custom Webpack configuration as detailed here?

Thanks,
Marco

[pomek]

Hi,

You can create your own build or eject and modify the configuration in CRA. AFAIU, you tried to create your own build and it does not work. Did you follow this instruction – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html? What kind of errors do you see in the dev-console?

[thtg88]

Hi guys, sorry about the radio silence, been on mobile all weekend and didn't have a chance to copy the error.
When creating a custom build, simply by importing the classic editor like detailed here, I get this error:

Module not found: Can't resolve './@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css' in '/Users/user/Documents/web-projects/javascript/ckeditor5-react-custom-build-style-error/node_modules/@ckeditor/ckeditor5-image/theme'

The file mentioned in the error is available in the dependencies, it just looks like the CSS import is not working properly (should be @import "~@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css"; instead of @import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css"; perhaps?).

If I then fix the import in that file, I seem to get another error:

TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:121)
    at IconView.render (iconview.js:94)
    at IconView.<anonymous> (observablemixin.js:254)
    at IconView.fire (emittermixin.js:229)
    at IconView.(anonymous function) [as render] (http://localhost:3000/static/js/0.chunk.js:88050:19)
    at ViewCollection.<anonymous> (viewcollection.js:80)
    at ViewCollection.fire (emittermixin.js:229)
    at ViewCollection.add (collection.js:171)
    at DropdownButtonView.render (dropdownbuttonview.js:85)
    at DropdownButtonView.<anonymous> (observablemixin.js:254)
    at DropdownButtonView.fire (emittermixin.js:229)
    at DropdownButtonView.(anonymous function) [as render] (http://localhost:3000/static/js/0.chunk.js:88050:19)
    at Template._renderElementChildren (template.js:756)
    at Template._renderElement (template.js:467)
    at Template._renderNode (template.js:446)
    at Template.render (template.js:153)
    at DropdownView.render (view.js:527)
    at DropdownView.render (dropdownview.js:247)
    at DropdownView.<anonymous> (observablemixin.js:254)
    at DropdownView.fire (emittermixin.js:229)
    at DropdownView.(anonymous function) [as render] (http://localhost:3000/static/js/0.chunk.js:88050:19)
    at ViewCollection.<anonymous> (viewcollection.js:80)
    at ViewCollection.fire (emittermixin.js:229)
    at ViewCollection.add (collection.js:171)
    at toolbarview.js:204
    at Array.map (<anonymous>)
    at ToolbarView.fillFromConfig (toolbarview.js:200)
    at ClassicEditorUI._initToolbar (classiceditorui.js:165)
    at ClassicEditorUI.init (classiceditorui.js:124)
    at classiceditor.js:214

Where it looks like the SVG icons don't get loaded properly, hence why my original question if I needed to npm run eject.

I can provide a minimal repo for you guys to investigate if needed?

Thanks,
Marco

[pomek]

(should be @import "~@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css"; instead of @import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css"; perhaps?)

Not sure. Rather Webpack cannot handle our files. Let's say Webpack does not understand how to handle PostCSS that we are using in *.css files.

TypeError: Cannot read property 'getAttribute' of null

This error means that Webpack wasn't able to load our icons. We are using raw-loader for SVG files. CRA uses file-loader for SVG and it intercepts our files. That's the reason why we require ejecting configuration.

I guess this article – https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#integrating-ckeditor-5-built-from-source – will help you resolve all issues.

[thtg88]

Thanks @pomek that's what I thought. I might wait to npm run eject as there had been talks about providing support for external additional Webpack configuration (comment) starting from CRA v3, which should be out soon. I've asked for an update on that issue, I'll see what they say and get back to you.

Thanks in the meantime :)

[pomek]

CRA v3

Do you have some resources that describe what would change?

[thtg88]

Not yet unfortunately, that thread is literally all I've got :D

[thtg88]

Nevermind, looks like CRA 3 is only going to include a workbox.config.js and not a fully fledged Webpack config override, looks like I'll have to eject !