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: Aiven-Open/klaw#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