samedi 17 avril 2021

Can't load module that imports css via ember-auto-import

I am trying to build an ember 3.25 application that imports the CkEditor via ember-auto-import

I was able to get the editor working fine by adding the following to my package.json:

"@ckeditor/ckeditor5-build-classic": "^27.0.0",

and adding the following to my ember component:

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

...

didInsertElement() {
  var editor = ClassicEditor
    .create( document.querySelector( '#editor' ), {
      ...
    });
}

But when I tried to add the ImageResize module via:

"@ckeditor/ckeditor5-image": "^27.0.0",

and in my component (as instructed here):

import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageResize from '@ckeditor/ckeditor5-image/src/image-resize';

I was initially seeing errors that read: 'UnhandledPromiseRejectionWarning: Error: webpack returned errors to ember-auto-import so I ran AUTO_IMPORT_VERBOSE=true ember serve

I now am seeing errors that ckeditor can't @import nested .css:

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> @import "../../mixins/_unselectable.css";

Or use ES6 syntax:

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css 6:0
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> :root {

and errors where it tries to include svg files:

ERROR in ./node_modules/@ckeditor/ckeditor5-widget/theme/icons/drag-handle.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0
 0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14
v14H1z"/></g></svg>

Based on this message:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

It seems like I need to add some webpack loaders to ember, but I'm really not sure how to do that. Can anyone help?




Aucun commentaire:

Enregistrer un commentaire