How can I use a custom build of CKEditor 5 with React and Vite? - 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

In my cause its:
"react": "18.2.0",
"vite": "2.9.10",
Here is solution what 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>
);
}