CODEWITHSUNDEEP
reactjswebpackckeditor5
cyruslk
cyruslk

Reputation: 869

@ckeditor: Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css'

I'm trying to customize the @ckeditor in my react strapi app.

Here's my package.json:

"@ckeditor/ckeditor5-basic-styles": "^16.0.0",
"@ckeditor/ckeditor5-block-quote": "^16.0.0",
"@ckeditor/ckeditor5-editor-classic": "^16.0.0",
"@ckeditor/ckeditor5-essentials": "^16.0.0",
"@ckeditor/ckeditor5-link": "^16.0.0",
"@ckeditor/ckeditor5-list": "github:ckeditor/ckeditor5-list",
"@ckeditor/ckeditor5-react": "^2.0.0",
"@ckeditor/ckeditor5-ui": "^16.0.0",

Here's my WYSIWYG editor:

import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import styled from 'styled-components';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';


ClassicEditor.builtinPlugins = [
  Essentials,
  Bold,
    Italic,
  BlockQuote,
  Paragraph,
  List,
  Underline,
  Strikethrough,
  Subscript,
  Superscript,
  Link,
  Code
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
    'Underline', 
    'Strikethrough', 
    'Code', 
    'Subscript', 
    'Superscript',
    'link',
    'bulletedList',
    'numberedList'
    ]
  },
  language: 'en'  
};


const Wrapper = styled.div`
  .ck-editor__main {
    min-height: 200px;
    > div {
      min-height: 200px;
    }
  }
`;

const Editor = ({ onChange, name, value }) => {
  return (
    <Wrapper>
      <CKEditor
        editor={ClassicEditor}
        data={value}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange({ target: { name, value: data } });
        }}
      />
    </Wrapper>
  );
};

export default Editor;

When I try to strapi build, I get the following error:

Error: Module not found: Error: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css' in '/Users/xx/Documents/xx/01. Code/Franklin-ford/franklin-ford-cms/ford-cms/node_modules/@ckeditor/ckeditor5-link/theme'

Note: When I go to the node_modules/@ckeditor/ckeditor5-link/theme, I don't see the required /mixins/_rwd.css

Thanks for your help

Upvotes: 4

Views: 7370

Answers (1)

Chris Gunawardena
Chris Gunawardena

Reputation: 6468

I too came across this, _rwd.css is in ckeditor5-ui as specified by the error message however not getting loaded because create-react-app is missing some webpack plugins, so you need to eject the app and try to integrate them like in here.

This is what I ended up with but having an issue with react.

But considering ejecting and extra build time, it's probably better to include it a pre built module like in here.

UPDATE: I managed to get it working by creating a local npm module from the pre built module here and then importing as a package via package.json using "my-ckeditor": "file: ]../../vendor/ckeditor". The package is built during npm i install using the preinstall.

enter image description here

Upvotes: 2

Related Questions