useMonaco hook causing 'operation is manually cancelled' error

[rohitspujari]

Describe the bug
The useMonaco hook in Vite project is causing uncaught promise error.

To Reproduce

import CodeEditor, { Monaco, useMonaco } from '@monaco-editor/react'
const monaco = useMonaco(); //this is causing  type: 'cancelation', msg: 'operation is manually canceled' error

useEffect(() => {

    if (monaco) {
      console.log('theme', theme);
      monaco.editor.defineTheme('default', {
        base: theme === 'light' ? 'hc-light' : 'vs-dark',
        inherit: true,
        rules: [],
        colors: {
          'editor.background': theme === 'light' ? '#ffffff' : '#020817',
        },
      });
      monaco.editor.setTheme('default');
    }
    return () => {};
  }, [theme, monaco]);

Screenshots
If applicable, add screenshots to help to explain your problem.

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: all

Additional context
Add any other context about the problem here.

[suren-atoyan]

I would like to know:

1. do you use React Strict mode?
2. Do your app and monaco function normally? Does this affect your app?

[rohitspujari]

I tried turning it on and off, the issue still persists. The app is functioning fine in development.Regards,RohitOn Jan 22, 2024, at 10:39 AM, Suren Atoyan ***@***.***> wrote: I would like to know: do you use React Strict mode? Do your app and monaco function normally? Does this affect your app? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[kulenski]

I can confirm the issue. On my setup I use StrictMode.

It happens with a child component (that uses useMonaco()) and that may have something to do with loading the files or something like this , because the workaround that worked for me was to conditionally render the child component (which uses useMonaco() internally) after onMount has return an instance of monaco.

The thing is that if you already have loaded the library one time, then this problem does not occur.. but on my setup if I refresh with CTRL+F5 then it happens. I noticed it right after I finished refactoring of some of my work... i noticed the problem after I refreshed with CTRL+F5.

Hope this helped.

[bartventer]

I encountered the same operation is manually canceled error with a multi-file editor when invoking restoreViewState (Vite app).

A hack to suppress the log is to add a global error handler:

// index.tsx / App.tsx

// ...

window.addEventListener("unhandledrejection", (event) => {
    if (event.reason && event.reason.name === "Canceled") {
        event.preventDefault();
        // custom logging
    }
});

This doesn't solve the root issue but helps keep the console clean.