error - Can not resolve dependence : 'ckeditor5/ckeditor5.css', please install it

[ThanhLong070]

Base on https://ckeditor.com/ckeditor-5/builder/

import { DeleteOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, message, Row, Space, Table, TableProps } from 'antd';
import { nanoid } from 'nanoid';
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import { ContentModel, GrammarVerbModel } from '../type';

import { CKEditor } from '@ckeditor/ckeditor5-react';

import {
  AccessibilityHelp,
  Alignment,
  Autosave,
  Bold,
  ClassicEditor,
  Essentials,
  FontBackgroundColor,
  FontColor,
  FontFamily,
  FontSize,
  GeneralHtmlSupport,
  Indent,
  IndentBlock,
  Italic,
  List,
  ListProperties,
  Paragraph,
  SelectAll,
  SpecialCharacters,
  SpecialCharactersArrows,
  SpecialCharactersCurrency,
  SpecialCharactersEssentials,
  SpecialCharactersLatin,
  SpecialCharactersMathematical,
  SpecialCharactersText,
  TableCaption,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar,
  Underline,
  Undo,
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

import './Ckeditor.css';

const GrammarVerbTable = ({
  lesson_id,
  grammar_verb,
  dispatch,
}: {
  lesson_id: number | undefined;
  grammar_verb: GrammarVerbModel;
  dispatch: any;
}): ReactElement<any, any> | null => {
  const [form] = Form.useForm();

  const [dataSource, setDataSource] = useState<ContentModel[]>([]);

  useEffect(() => {
    if (grammar_verb && grammar_verb.contents && grammar_verb.contents.length > 0) {
      setDataSource(grammar_verb.contents);
      form.setFieldsValue({ name: grammar_verb.name, contents: grammar_verb.contents });
    }
  }, [grammar_verb, grammar_verb.contents]);

  const addBlankPage = () => {
    setDataSource([...dataSource, { key: nanoid(), value: '' }]);
  };

  const editorContainerRef = useRef(null);
  const editorRef = useRef(null);
  const [isLayoutReady, setIsLayoutReady] = useState(false);

  useEffect(() => {
    setIsLayoutReady(true);

    return () => setIsLayoutReady(false);
  }, []);

  const editorConfig: any = {
    toolbar: {
      items: [
        'undo',
        'redo',
        '|',
        'selectAll',
        '|',
        'fontSize',
        'fontFamily',
        'fontColor',
        'fontBackgroundColor',
        '|',
        'bold',
        'italic',
        'underline',
        '|',
        'specialCharacters',
        'insertTable',
        '|',
        'alignment',
        '|',
        'bulletedList',
        'numberedList',
        'indent',
        'outdent',
        '|',
        'accessibilityHelp',
      ],
      shouldNotGroupWhenFull: false,
    },
    plugins: [
      AccessibilityHelp,
      Alignment,
      Autosave,
      Bold,
      Essentials,
      FontBackgroundColor,
      FontColor,
      FontFamily,
      FontSize,
      GeneralHtmlSupport,
      Indent,
      IndentBlock,
      Italic,
      List,
      ListProperties,
      Paragraph,
      SelectAll,
      SpecialCharacters,
      SpecialCharactersArrows,
      SpecialCharactersCurrency,
      SpecialCharactersEssentials,
      SpecialCharactersLatin,
      SpecialCharactersMathematical,
      SpecialCharactersText,
      Table,
      TableCaption,
      TableCellProperties,
      TableColumnResize,
      TableProperties,
      TableToolbar,
      Underline,
      Undo,
    ],
    fontFamily: {
      supportAllValues: true,
    },
    fontSize: {
      options: [10, 12, 14, 'default', 18, 20, 22],
      supportAllValues: true,
    },
    htmlSupport: {
      allow: [
        {
          name: /^.*$/,
          styles: true,
          attributes: true,
          classes: true,
        },
      ],
    },
    placeholder: 'Type or paste your content here!',
    table: {
      contentToolbar: [
        'tableColumn',
        'tableRow',
        'mergeTableCells',
        'tableProperties',
        'tableCellProperties',
      ],
    },
  };

  const columns: TableProps<GrammarVerbModel>['columns'] = [
    {
      dataIndex: 'content',
      key: 'key',
      render: (_, __, index) => <div># Trang {index + 1}</div>,
    },
    {
      dataIndex: 'content',
      key: 'content',
      render: (_, record, index) => (
        <div className="main-container">
          <div
            className="editor-container editor-container_classic-editor"
            ref={editorContainerRef}
          >
            <div className="editor-container__editor">
              <div ref={editorRef}>
                {isLayoutReady && (
                  <CKEditor
                    editor={ClassicEditor}
                    config={editorConfig}
                    data={dataSource[index].value}
                    onChange={(event, editor) => {
                      const newDataSource = [...dataSource];
                      newDataSource[index].value = editor.getData();
                      setDataSource(newDataSource);
                    }}
                  />
                )}
              </div>
            </div>
          </div>
        </div>
      ),
    },
    // remove button
    {
      dataIndex: 'content',
      key: 'action',
      render: (_, __, index) => (
        <Button
          style={{ backgroundColor: '#f5222d', color: '#fff' }}
          icon={<DeleteOutlined />}
          onClick={() => setDataSource(dataSource.filter((_, i) => i !== index))}
        >
          Xoá
        </Button>
      ),
    },
  ];

  // @ts-ignore
  const onFinish = useCallback(async (values: any) => {
    values.contents = dataSource.map((item) => ({
      value: item.value,
    }));
    values.lesson_id = lesson_id;
    values.id = grammar_verb.id || undefined;
    console.log('values', values);

    const result = await dispatch({ type: 'LessonDetail/saveGrammarVerb', payload: values });

    if (result.status) await dispatch({ type: 'LessonDetail/detail', payload: lesson_id });
    else message.error(result.error.message);
  });

  return (
    <>
      <Form layout="horizontal" autoComplete="off" onFinish={onFinish} form={form}>
        <Row>
          <Col>
            <Form.Item
              label="Tiêu đề bài học"
              name="name"
              style={{
                marginLeft: '1em',
              }}
              rules={[{ required: true, message: '' }]}
            >
              <Input
                placeholder="Nhập tên tiêu đề"
                style={{ width: '40em', marginLeft: '3.5em' }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item name="contents">
              <Table
                rowKey="key"
                columns={columns as any}
                dataSource={dataSource}
                showHeader={false}
                pagination={false}
              />
            </Form.Item>
          </Col>
          <Col span={12} offset={10} style={{ marginTop: 16 }}>
            <Space>
              <Form.Item>
                <Button icon={<SaveOutlined />} type="primary" htmlType="submit">
                  Lưu
                </Button>
              </Form.Item>
              <Form.Item>
                <Button type="primary" icon={<PlusOutlined />} onClick={addBlankPage}>
                  Thêm mới phần học
                </Button>
              </Form.Item>
            </Space>
          </Col>
        </Row>
      </Form>
    </>
  );
};

export default GrammarVerbTable;

get error:
error - Can not resolve dependence : 'ckeditor5/ckeditor5.css', please install it
error - AssertionError [ERR_ASSERTION]: dependence not found: ckeditor5/ckeditor5.css
at Dep.buildExposeContent (/Users/longnguyen/Documents/work/mine/hola/hola-bo/node_modules/@umijs/mfsu/dist/dep/dep.js:90:31)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DepBuilder.writeMFFiles (/Users/longnguyen/Documents/work/mine/hola/hola-bo/node_modules/@umijs/mfsu/dist/depBuilder/depBuilder.js:159:23)
at async DepBuilder.build (/Users/longnguyen/Documents/work/mine/hola/hola-bo/node_modules/@umijs/mfsu/dist/depBuilder/depBuilder.js:137:7)
at async MFSU.buildDeps (/Users/longnguyen/Documents/work/mine/hola/hola-bo/node_modules/@umijs/mfsu/dist/mfsu/mfsu.js:227:7) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: null,
expected: true,
operator: '=='

[filipsobol]

Hi @ThanhLong070. Which bundler are you using?

We have already received reports of this not working in Vite 2 and Vite 3 (#16638) and have found a possible solution. If you are using one of these bundlers, you can update to Vite 4 or 5 or wait for our hotfix.

[ThanhLong070]

Hi @ThanhLong070. Which bundler are you using?

We have already received reports of this not working in Vite 2 and Vite 3 (#16638) and have found a possible solution. If you are using one of these bundlers, you can update to Vite 4 or 5 or wait for our hotfix.

I'm using umijs, not vite

[filipsobol]

This is the first I've heard of it, but it seems to use Vite under the hood. Are you using the latest version of umijs? The latest versions seem to use Vite 4.5.2, which can handle this CSS import.

[filipsobol]

This problem has been fixed in 42.0.2.