未捕获的语法错误：请求的模块“/ckeditor5/build/ckeditor.js”不提供名为“default”的导出

Question

I'm building SPA website with VueJS for frontend and Laravel for backend. Now I want to add CKEditor custom build to Vue, I have do following steps in CKEditor Documentation, but I received this error:

enter image description here

Here is my code:

enter image description here

I'm using Vite instead of Webpack, Is it make problem?

I want to use CKEditor custom build in my vue app

Answer 1

I have the same error but with ReactJS maybe it's work for you also. Instead of make a classic import:

import Editor from '../../path' 

Just import directly like:

import from '../../path/'

After this, you can use ClassicEditor in your <Ckeditor /> component. Here's the full example that works to me:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import 'react-markdown-editor-lite/lib/index.css';
import '../../ckeditor5/build/ckeditor';

const RichText = ({ data }) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={data}
      onChange={(_, editor) => {
        const data = editor.getData();
        console.log(data);
      }}
    />
  );
};

export default RichText;

Hope it helps you:)