React strict mode race condition
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.
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
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
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.
The new release that will be available later today fixes React Strict mode issue. We have multiple unit test for that now.
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