用React.lazy加载CKEditor5组件

Question

In my project I want to use CKEditor5. Problem is, this version is not compatible with IE11 so my goal is to lazy load CKEditor5 components and when IE11 is detected, I dont want to simply load those components.

When component is imported like this import CKEditor from "@ckeditor/ckeditor5-react"; it just importing class, however with React.lazy import component is wrapped with React.LazyExoticComponent .

I need to create instance of GFMDataProcessor according to documentation https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html

But with dynamic import I am not able to do that, since this line of code throws an error and I dont know what argument should I pass, since GFMDataProcessor is React.LazyExoticComponent and not GFMDataProcessor class.

//Expected 1 arguments, but got 0  
const markdownPlugin = (editor) => { editor.data.processor = new GFMDataProcessor() }

Other problem is with my configuration for CKEditor, it has to be lazy loaded also and here is the same problem as above, ClassicEditor is again React.LazyExoticComponent instead of class and I have to pass to editor property imported component, not the wrapped one with React.LazyExoticComponent . Is there some way how I can extract dynamically imported component from wrapped one or any other way how can this be solved?

const ckeditorProps = {
        data: data,
        editor: ClassicEditor,
        onChange: (event, editor) => {
            const data2 = editor.getData();
            if (data2 !== data) {
                this.onChange(data2, this.state.selectedCultureCode, true);
            }
        },
        config: editorConfiguration
    }

Here are my dynamic imports

const CKEditor = React.lazy(() => import("@ckeditor/ckeditor5-react"));
const ClassicEditor = React.lazy(() => import("@ckeditor/ckeditor5-build-classic"));
const GFMDataProcessor = React.lazy(() => import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor"));

Usage in DOM structure

<React.Suspense fallback={<div>Loading...</div>}>
    <CKEditor {...ckeditorProps} />
</React.Suspense>

Answer 1

I don't know why you wrap anything you want to be fetched asynchronously into the React.lazy components. You should just fetch them normally when they're needed. Maybe something like the following will work for you:

let ClassicEditor, GFMDataProcessor;

const LazyCKEditor = React.lazy(() => {
    return Promise.all([
        import("@ckeditor/ckeditor5-build-classic"),
        import("@ckeditor/ckeditor5-react"),
        import("@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor")
    ]).then(([ _ClassicEditor, _CKEditor, _GFMDataProcessor ]) => {
        ClassicEditor = _ClassicEditor;
        GFMDataProcessor = _GFMDataProcessor;

        return _CKEditor;
    });
});