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.

Bohdan Ivanchenko · Answer 1 · 2023-08-04T13:19:17.067

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"] },
    },
  };
});

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

What I tried

1 Answers1