Uncaught promise when using useMonaco()

[willdady]

When I add these lines:

  const monaco = useMonaco();
  useEffect(() => {
    if (monaco) {
      console.log('here is the monaco instance:', monaco);
    }
  }, [monaco]);

I get the following error in my browser console:

Uncaught (in promise) {type: 'cancelation', msg: 'operation is manually canceled'}

[suren-atoyan]

Do you use React 18 with strict mode?

[willdady]

Yes, 18.2. It's a Next.js (13.0.7) app. Not sure about strict mode.

[suren-atoyan]

could you please check this?

[stefanbugge]

I get the same error in the console. I am using React 18 in strict mode but not Next.js

[cbn-falias]

Same error but probably a different case with React 18 and no Next.js.

• Custom loader based on this
• React.StrictMode
• Loading it with React.lazy()

If I don't load it lazy it would work but that's not an option in my project.

---

Works:

• CDN + No strict mode
• Custom loader + Strict mode

Doesn't work:

• CDN + Strict mode
• Custom loader + Strict mode + Lazy

[AtharvaUmbarkar]

I am also getting the same error. I am using NextJS 13 with the useMonaco() hook, with Strict Mode: On. Btw, I am already using the "use client" directive on top of the code given below to render the component client side.

Here's how I am using it. This usage also gives the "default props on functional components are depreciated" warning

[mathieu-anderson]

We are encountering this issue as well: https://github.com/aiven/klaw/issues/1464

I have been able to ascertain that this console.error seems to happen unconditionally when calling useMonaco: in this minimal example, it seems to always be there https://codesandbox.io/s/sleepy-moore-3mct7n?file=/src/App.js:123-132

[mathieu-anderson]

I also ascertained that the console.error only happens when using StrictMode.

[wb-wenbei]

The same error with React 18 in strict mode, not Next.js

[moiri]

I get the same error when updating the JSON schema with useEffect().

• React 18.3.1
• Strict mode: off
• @monaco-editor/react: 4.6.0

import React, { useEffect } from 'react';
import Editor, { useMonaco } from '@monaco-editor/react';

interface IConfigEditor {
    value: string;
    path?: string;
    schemaUri?: string;
}

export const ConfigEditor: React.FC<IConfigEditor> = props => {
    const monaco = useMonaco();

    useEffect(() => {
        if (monaco && props.path && props.schemaUri) {
            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                validate: true,
                enableSchemaRequest: true,
                schemas: [
                    {
                        uri: props.schemaUri,
                        fileMatch: [props.path],
                    },
                ],
            });
        }
    }, [monaco, props.path, props.schemaUri]);
    return (
        <Editor
            path={props.path}
            language="json"
            value={props.value}
        />
    )
};

Edit: I solved the problem in non-strict mode by using the beforeMount handler of the Editor component to initialize the schemas and a useEffect() hook to update the schema list. It still fails in strict mode, though.