Advanced configuration for CKEditor with Strapi - ckeditor

Question

I followed the guide to replace Strapi's WYSIWYG editor with CKEditor. This worked just fine.
After following the guide on how to use CKEditor as React Component from CKEditor site, I expected CKEditor to load and function properly.
However, running npm run build failed with the following error:
Error: Module not found: Error: Can't resolve './#ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in 'C:\work\myProject\backend\node_modules\#ckeditor\ckeditor5-image\theme'
Code snippets
From package.json:
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^18.0.0",
"#ckeditor/ckeditor5-react": "^2.1.0",
"#ckeditor/ckeditor5-adapter-ckfinder": "^18.0.0",
"#ckeditor/ckeditor5-alignment": "^18.0.0",
"#ckeditor/ckeditor5-autoformat": "^18.0.0",
"#ckeditor/ckeditor5-basic-styles": "^18.0.0",
"#ckeditor/ckeditor5-block-quote": "^18.0.0",
// ...a lot more additional plugins
From C:\work\myProject\backend\extensions\content-manager\admin\src\components\CKEditor\index.js
import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
// ...a lot more components imports
...
const editorConfig = {
plugins: [
Autoformat,
BlockQuote,
Bold,
CKFinder,
// ...the rest of the plugins
],
toolbar: {
items: [
'undo',
'redo',
'CKFinder',
'|',
'heading',
'fontFamily',
// ...the rest of the plugins
],
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
}
...
const Editor = ({ onChange, name, value }) => {
return (
<Wrapper>
<CKEditor
editor={ClassicEditor}
data={value}
config={editorConfig}
onChange={(event, editor) => {
const data = editor.getData();
onChange({ target: { name, value: data } });
}}
/>
</Wrapper>
);
};
System
Node.js version: 13.5.0
NPM version: 6.13.4
Strapi version: 3.0.0-beta.19.3
Operating system: Windows 10 Pro
The CKEditor guide suggests that I'm using the Advanced Setup. This setup requires a certain Webpack configuration for compiling .css files and .svg icons. But I'm not sure where is the Webpack file that I should edit and how should I do that. Perhaps that is the problem.

Answer 1

You need to change
import CKEditor from '#ckeditor/ckeditor5-react';
To
import { CKEditor } from '#ckeditor/ckeditor5-react';
Reference: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html