Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor still not disposing before new one inits in react strict mode #892

Open
pbrostean opened this issue Mar 11, 2025 · 3 comments
Open

Comments

@pbrostean
Copy link

Description:
I assumed that the following pull request #873 would resolve the issue. However, the problem persists in the @typefox/monaco-editor-react package when the application is rendered twice in React Strict Mode.

Upon inspecting the node modules of the @typefox/monaco-editor-react package, it appears that the changes from the pull request #873 are not present. This suggests that the fix has not been integrated into the latest version of the package available on npm.

Steps to Reproduce:

  1. Enable React Strict Mode in your application.
  2. Use the @typefox/monaco-editor-react package to initialize an editor instance.
  3. Observe the behavior when the component is rendered twice.

Expected Behavior:
The editor should be properly disposed of before a new instance is initialized, preventing any potential memory leaks or unexpected behavior.

Actual Behavior:
The editor is not disposed of correctly, leading to issues when the component is rendered twice in React Strict Mode.

Please let me know if you need any further information or if there are any additional steps I should take to help resolve this issue.

@pbrostean
Copy link
Author

Image

@cdietrich
Copy link
Contributor

did you check the new autoXxxxx flags?

@pbrostean
Copy link
Author

@cdietrich I haven't noticed the new flags until now, but I also didn't think that the problem was related to them. Until now, I never needed a languageclientconfig because I load languages via VSIX files and extensions. How do I do that then?

import { LogLevel } from "@codingame/monaco-vscode-api"
import { WrapperConfig } from "monaco-editor-wrapper"
import { configureDefaultWorkerFactory } from "monaco-editor-wrapper/workers/workerLoaders"

export const createMonacoWrapperConfig = (text: string, fileExt: string): WrapperConfig => {
    return {
        $type: "extended",
        logLevel: LogLevel.Warning,
        htmlContainer: document.getElementById("monaco-editor-root") as HTMLElement,
        vscodeApiConfig: {
            enableExtHostWorker: true,
            userConfiguration: {
                json: JSON.stringify({
                    "editor.experimental.asyncTokenization": true
                })
            },
        },
        editorAppConfig: {
            codeResources: {
                original: {
                    text: text,
                    fileExt: fileExt
                },
                modified: {
                    text: text,
                    fileExt: fileExt
                }
            },
            editorOptions: {
                theme: "Default Light Modern",
                minimap: {
                    enabled: false
                },
                lineNumbersMinChars: 2,
            },
            useDiffEditor: false,
            diffEditorOptions: {
                renderSideBySide: true,
                renderOverviewRuler: false,
                lineNumbersMinChars: 2,
                hideUnchangedRegions: {
                    enabled: true
                }
            },
            monacoWorkerFactory: configureDefaultWorkerFactory
        }
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants