microsoft
[Bug] Unmounting component in react throws error
Reproducible in vscode.dev or in VS Code Desktop?
- [x] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [x] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
No response
Monaco Editor Playground Code
Reproduction Steps
Using React; mounting the editor component then removing the component from the react DOM throws an error. This did not occur in version 0.50.0 but has started in 0.52.2
Our rendering code looks like:
import type { EditorProps } from "@monaco-editor/react";
import type { FunctionComponent } from "react";
import Editor from "@monaco-editor/react";
import { useUserSettings } from "../hooks/settings/useUserSettings";
const ResizableEditor: FunctionComponent<
EditorProps & {
height: string | number;
border?: string | number;
}
> = (props) => {
const { userSettingsState } = useUserSettings();
return (
<div style={{ height: props.height, position: "relative", paddingLeft: props.width }}>
<Editor
{...props}
theme={userSettingsState.theme === "dark" ? "vs-dark" : "light"}
options={{
...props.options,
automaticLayout: true,
}}
/>
</div>
);
};
export { ResizableEditor };
Actual (Problematic) Behavior
Uncaught Error: TextModel got disposed before DiffEditorWidget model got reset Error: TextModel got disposed before DiffEditorWidget model got reset at UniqueContainer.value (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-BDJUYZEV.js?v=bde8a730:118452:29) at Emitter._deliver (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-BDJUYZEV.js?v=bde8a730:2465:20) at Emitter._deliverQueue (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-BDJUYZEV.js?v=bde8a730:2474:16) at Emitter.fire (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-BDJUYZEV.js?v=bde8a730:2495:16) at _a7.dispose (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-BDJUYZEV.js?v=bde8a730:33272:29) at I (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/@monaco-editor_react.js?v=bde8a730:605:72) at http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/@monaco-editor_react.js?v=bde8a730:560:189 at safelyCallDestroy (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-GSKIDCVT.js?v=bde8a730:16796:13) at commitHookEffectListUnmount (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-GSKIDCVT.js?v=bde8a730:16923:19) at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:3000/@fs/Users/buster.major/Projects/FlywayDesktop/app/node_modules/.vite/deps/chunk-GSKIDCVT.js?v=bde8a730:18333:17)
Expected Behavior
Should not error
Additional Context
This did not occur in version 0.50.0 but has started in 0.52.2
We have a similar problem when using monaco editor with @monaco-editor/react 4.6.0. But for us the exception started to appear starting from version 0.50 of monaco editor. It occurs when unmounting diff editor only(DiffEditor component in @monaco-editor/react).
Currenly this issue is upgrade blocker for us, we have to freeze 0.49 dependency.
Using 0.50 on my side fixed the issue
index.tsx
import { loader } from '@monaco-editor/react';
// force using 0.50 because 0.52 crashes when unmounting the DiffEditor
loader.config({
paths: {
vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
},
});
