monaco-languageclient icon indicating copy to clipboard operation
monaco-languageclient copied to clipboard

React strict mode race condition

Open zoran995 opened this issue 10 months ago • 3 comments

When running react-wrapper it will run into race condition during initialization and cleanup and throw an error

Uncaught (in promise) Error: file 'extension-file://typefox.statemachine-example/extension/react-statemachine-configuration.json/' already exists

Steps to reproduce:

  • Start React: Langium Statemachine Language Client & Language Server (Worker) example (only reproducible in local dev mode)
  • Check strict mode
  • Start the editor
  • Check the error in the console (when using webpack error overlay, it will be annoying with popup)

When running in strict mode react will run useEffect twice but won't wait for async code to complete before running the cleanup, so the execution will basically be initializing 1 -> destroying 1 -> initializing 2 -> destroyed 1 -> initialized 1 -> starting 1 -> started 1 the error is thrown inside initializing for second time. Because both effect and cleanup are asynchronous, one possible solution would be to implement a basic task queue to ensure that nothing runs in parallel.

zoran995 avatar Feb 19 '25 20:02 zoran995

I see the problem also in normal mode when I change props eg to update text of Editor / switch model https://github.com/TypeFox/monaco-languageclient/discussions/858

cdietrich avatar Feb 19 '25 20:02 cdietrich

Hi @zoran995 and @cdietrich it's time to re-assess the whole situation. #904 is under review. The current status is available as next release: https://www.npmjs.com/package/@typefox/monaco-editor-react/v/6.7.0-next.0

kaisalmen avatar Apr 04 '25 07:04 kaisalmen

If there are more issues with the react component, please let me know. We can fix them pretty soon. 6.6.0 was not the "best" release quality wise.

kaisalmen avatar Apr 04 '25 07:04 kaisalmen

The new release that will be available later today fixes React Strict mode issue. We have multiple unit test for that now.

kaisalmen avatar Sep 19 '25 10:09 kaisalmen

Fixed by new major releases: [email protected] is available: https://www.npmjs.com/package/monaco-languageclient/v/10.0.0 @typefox/[email protected] is available: https://www.npmjs.com/package/@typefox/monaco-editor-react/v/7.0.0

kaisalmen avatar Sep 19 '25 14:09 kaisalmen