Integrating Ckeditor in an Nx monorepo

[sc-mavirdol]

📝 Provide detailed reproduction steps (if any)

1. Please check the repository at https://github.com/sc-mavirdol/poc-ckeditor

✔️ Expected result

The build completes without errors.

❌ Actual result

poc-ckeditor/node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css Unknown word

1 | import api from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
2 | import content from "!!../../../css-loader/dist/cjs.js!../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!./widgettypearound.css";
3 |

at Object.<anonymous> (poc-ckeditor/node_modules/@nx/webpack/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[4].use[1]!/poc-ckeditor/node_modules/@nx/webpack/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[4].use[2]!/poc-ckeditor/node_modules/style-loader/dist/cjs.js??ruleSet[1].rules[10].use[0]!/poc-ckeditor/node_modules/css-loader/dist/cjs.js!/poc-ckeditor/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!/poc-ckeditor/node_modules/@ckeditor/ckeditor5-widget/theme/widgettypearound.css:1:7)
at /poc-ckeditor/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:456:10
at Hook.eval (eval at create (/poc-ckeditor/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at /poc-ckeditor/node_modules/webpack/lib/Compilation.js:5248:39
at tryRunOrWebpackError (poc-ckeditor/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/poc-ckeditor/node_modules/webpack/lib/Compilation.js:5246:12)
at __webpack_require__ (poc-ckeditor/node_modules/webpack/lib/Compilation.js:5203:18)
at poc-ckeditor/node_modules/webpack/lib/Compilation.js:5275:20
at symbolIterator (poc-ckeditor/node_modules/neo-async/async.js:3485:9)
at timesSync (/poc-ckeditor/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (poc-ckeditor/node_modules/neo-async/async.js:3463:5)
at poc-ckeditor/node_modules/webpack/lib/Compilation.js:5143:16
at symbolIterator (poc-ckeditor/node_modules/neo-async/async.js:3485:9)
at done (poc-ckeditor/node_modules/neo-async/async.js:3527:9)
at poc-ckeditor/node_modules/webpack/lib/Compilation.js:5057:8
at poc-ckeditor/node_modules/webpack/lib/Compilation.js:3498:5
at /poc-ckeditor/node_modules/webpack/lib/Cache.js:99:5
at Hook.eval [as callAsync] (eval at create (/poc-ckeditor/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[filipsobol]

This error message indicates that the problem is either with our styles (which require PostCSS) or with the webpack loader. Fortunately, very soon we will be releasing the new installation methods which may solve this problem as we will be shipping plain CSS (instead of PostCSS) and will not require any special Webpack setup and plugins.