useMonaco hook causing 'operation is manually cancelled' error
rohitspujari opened this issue · comments
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.
I would like to know:
- do you use React Strict mode?
- Do your app and monaco function normally? Does this affect your app?
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.