Using formio with monaco editor causes the builder/renderer to malfunction.

[llemire-exp]

Describe the bug

When creating a new instance of the Formio builder or when rendering a form, if I render a monaco editor (through the monaco-editor/react package) all components that need an external library do not work. for example, if a "date time" component is included in the form, it fails since there is an issue with loading file-pickr or when a text-area has the editor setting as quill or ckeditor.

Version/Branch latest version: 5.0.1

To Reproduce Steps to reproduce the behavior: I have included a small react app in attachement, so you can download it npm install and npm run dev to see the issue

poc-formio-monaco.zip

1. add a monaco editor inside your page
2. create a form with a text area component of type ckeditor

Expected behavior The form with the textarea of type ckeditor should appear.

Screenshots Here's the result:

The ckeditor is missing

Here's the code used to create this page (included in the attachment)

Additional context If I delay the rendering of the monaco editor to be after the form has been built, the issue is not present, so it looks like monaco editor does something that has an impact on

In our app we use monaco editor a lot which mean that If a user opens any page with monaco editor before he visits a page with a formio form or the formio builder, it causes problem, for now our only solution is to pre-load all the library needed by formio that should only be loaded when needed.

[brendanbond]

Hi @llemire-exp thanks for filing this issue.

1. Rather than put the createForm API in an effect, have you tried using our @formio/react wrapper library?
2. Are there any errors in the console?

[llemire-exp]

@brendanbond Sorry for the late response, I have created a new project with the latest version of @formio/react and did the same test with:

import ReactMonacoEditor from "@monaco-editor/react";
import { Form } from "@formio/react";

function App() {
    return (
        <>
        <Form src={{
            "display": "form",
			"components": [
                {
                    "label": "Text Area",
					"widget": "",
					"applyMaskOn": "change",
					"editor": "ckeditor",
					"tableView": true,
					"key": "textArea",
					"type": "textarea",
					"input": true,
					"isUploadEnabled": false
				}
			]
		}}/>
        <div style={{ height: "20vh" }}></div>
        <ReactMonacoEditor />
        </>
    );
}

export default App;

Here are my dependencies:

    "@formio/react": "6.0.1",
    "@monaco-editor/react": "^4.7.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"

1. the CKEditor still doesn't load
2. All I have is this warning:

[ZenMasterJacob20011]

I was able to reproduce the issue you're having. Still unsure why the CKEditor is not loading. If you look at the requireLibrary function in @formio/core you can see that for some reason the lib.ready promise is not resolving. I believe the issue has something to do with the CKEditor being clobbered by a module ReactMonacoEditor is pulling in.