Conflict with @monaco-editor/react

[FernandoFernandesEverest]

Issue Description

When using @typefox/monaco-editor-react and @monaco-editor/react in the same application, the editor models are not retained correctly when navigating between pages using ReactRouterDom or similar routing libraries that do not trigger a full page reload.

How to Reproduce

• Create an editor instance using @typefox/monaco-editor-react:

import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';

<MonacoEditorReactComp
  {...{ onLoad, userConfig }}
  ref={editorRef}
  style={{ height, width: '100%' }}
/>

• Open the page with the editor and run the following in the console:

this.monaco.editor.getModels().map(m => m.id)

Expected output: ["$model1"]

• Navigate to another page using ReactRouterDom or a similar routing library that does not trigger a full page reload.

Create an editor instance using @monaco-editor/react:

<MonacoEditor {...DEFAULT_EDITOR_CONFIG} />

• Open the console and run the following:

this.monaco.editor.getModels().map(m => m.id)

Expected output: ["$model1", "$model2"]
Actual output: []

Expected Behavior

The editor models should be retained and the output should be ["$model1", "$model2"] after navigating between pages and creating a new editor instance.

Actual Behavior

The editor models are not retained, and the output is [] after navigating between pages and creating a new editor instance.

[kaisalmen]

@FernandoFernandesEverest mixing @typefox/monaco-editor-react and @monaco-editor/react is not supported. You have to use one or the other. We use the @codingame/monaco-vscode-api which relies on a api compatible version of monaco-editor and the dependency is therefore different (see https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper-react/package.json#L45). You may enforce the same dependency, but I still would not recommend to us both packages in the same project.

[CGNonofr]

it's a problem probably only because it uses monaco-loader, which load another instance of monaco-editor (from the official package)

but monaco-loader can be configured to use local monaco-editor, maybe it's worth giving it a try

[FernandoFernandesEverest]

it's a problem probably only because it uses monaco-loader, which load another instance of monaco-editor (from the official package)

but monaco-loader can be configured to use local monaco-editor, maybe it's worth giving it a try

@CGNonofr Thanks for the suggestion, unfortunately it didn't work as well. So far What worked as workaround, was overriding the globalThis

 const monaco = useMonaco();
  useEffect(() => {
    if (monaco) {
      (globalThis as unknown as { monaco: Monaco }).monaco = monaco;
    }
  }, [monaco]);