Ckeditor5: Compatibility with [email protected]

[Reinmar]

When you're following our quick start guide, where we explain to install style-loader from npm, you end up with this error:

ERROR in ./node_modules/@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js 15:0-36
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-engine/src/view/placeholder.js 10:0-37
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditorui.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/stickypanel.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview.js 15:0-57
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js 17:0-50
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold/boldui.js
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js 18:0-52
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/editorui/editorui.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/editoruiview.js 15:0-54
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/view.js 19:0-38
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/tooltip/tooltipview.js 12:0-52
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold/boldui.js
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js 14:0-46
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold/boldui.js
 @ ./node_modules/@ckeditor/ckeditor5-basic-styles/src/bold.js
 @ ./app.js
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/label/label.css
Module build failed (from ./node_modules/style-loader/dist/index.js):
ValidationError: Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'singleton'. These properties are valid:
   object { injectType?, attributes?, insert?, base? }
    at validate (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\Users\mgswo\Git\cke5-source\node_modules\style-loader\dist\index.js:17:28)
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/label/labelview.js 12:0-48
 @ ./node_modules/@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ./node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./app.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Collapse

Apparently, the new version of style-loader (so far, we've been using 0.23.0) changed something in its configuration. We've got to look into that. For now, I'll make a PR to add a version specifier to npm i call.

[ma2ciek]

I see that the API has changed significantly - https://github.com/webpack-contrib/style-loader/releases/tag/v1.0.0.

[Reinmar]

We use only the singleton option, so this applies to us:

the singleton option was removed (look documentation about the injectType option)

[oleq]

I created PRs in ckeditor5, ckeditor5-build-* and ckeditor5-dev that migrate the entire project to style-loader v1.0.0. Root PR.

[arthurcantarela]

It seems to work replacing singleton: true with injectType: "singletonStyleTag" in the style-loader options object, as seen in https://github.com/webpack-contrib/style-loader#injecttype