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}
  />