How can I use a custom build of CKEditor 5 with React and Vite?

Question

For the past several months, I've been building my app with Create React App.

However, Ionic now supports Vite and I am attempting to migrate my app from CRA to Vite.

Originally, I made a CKEditor 5 Custom Build and set it up in a React app like this:

import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import { CKEditor } from '@ckeditor/ckeditor5-react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import Editor from 'ckeditor5-custom-build/build/ckeditor';

Before building my app, I build the custom CKEditor like this:

cd ckeditor5; npm run build

The CKEditor build command is webpack --mode production.

Now, after configuring Vite, when I run npm run build, I get the following error:

'default' is not exported by ckeditor5/build/ckeditor.js, imported by src/components/contentTypeCard/CKEditorInput.tsx

The CKEditor issue queue has a thread on a lack of documentation on issues with Vite, but there's nothing in particular about how to resolve this issue.

What I tried

I tried building CKEditor in development mode (webpack --mode development) and examining the ckeditor.js file to try to export Editor, but the file has over 100,000 lines of code and I am totally lost.

Answer 1

I solved this by integrating the custom CKEditor build with my Vite build process.

What I did:

First, open the package.json from the custom build (the one with the name of ckeditor5-custom-build and copy the depedencies to your project's package.json.

Next, make a config file based on src/ckeditor.ts from the custom build.

I put mine in editorConfig.ts:

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import Link from '@ckeditor/ckeditor5-link/src/link';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';

    const editorConfig = {
      fontSize: {
        // Excludes "tiny" and "huge".
        options: ['small', 'default', 'big'],
      },
      plugins: [Bold, Essentials, FontSize, Link, Paragraph, Underline],
      toolbar: [
        'bold',
        'underline',
        'fontsize',
        '|',
        'link',
        '|',
        'undo',
        'redo',
      ],
    };
    
    export default editorConfig;

Then, use the CKEditor component like this:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import editorConfig from '../../constants/CKEditor/editorConfig';

  <CKEditor
    editor={ClassicEditor}
    config={editorConfig}
    data={myData}
  />

Answer 2

You can fix the CKeditor 5 custom build by going to the folder containing CKeditor5.

webpack.config.js

Delete:

output: {
    // The name under which the editor will be exported.
    library: 'ClassicEditor',
    path: path.resolve(__dirname, 'build'),
    filename: 'ckeditor.js',
    libraryTarget: 'umd',
    libraryExport: 'default',  
 }

Add:

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'ckeditor.js',
    library: {
      type: 'module',
    },
  },
  experiments: {
    outputModule: true,
  }

Answer 3

In my case it:

"react": "18.2.0", "vite": "2.9.10",

Here is the solution that I found:

package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

Update for vite 4.4.8:

"vite": "4.4.8",

vite.config.ts

import commonjs from "vite-plugin-commonjs";

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      commonjs({
        filter(id) {
          if (["libs/ckeditor5/build/ckeditor.js"].includes(id)) {
            return true;
          }
        },
      }),
    ],
    optimizeDeps: {
      include: ["ckeditor5-custom-build"],
    },
    build: {
      commonjsOptions: { exclude: ["ckeditor5-custom-build"] },
    },
  };
});