Extended monaco editor does not recreate after unmounting from dom

[asimaranov]

When editor component is unmounted (user click back button in modal with editor and opens it again), monaco editor is not shown back then. Problem only appears when extended editor is used (with views service). The same issue is presented in example https://typefox.github.io/monaco-languageclient/ghp_react_appPlayground.html

When I first click start, the editor appears. On next click it hides. On next click editor does not appear. Error in console -

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setAsDefaultApi')
    at xf (common-C96ELLcV.js:14:165122)
    at onLoad (reactMain-BG3p6kyB.js:1:811)
    at P (index-DXSjOzOC.js:33:170991)
    at async index-DXSjOzOC.js:33:171134

Issue is a blocker for me. Appreciate any help to solve the issue

[kaisalmen]

Hi @asimaranov I am working improvements, but didn't have much time lately. Can you test preview version 6.7.0-next.1

[asimaranov]

Hi! Issue remains. Tried to investigate, seems something like that views service (used in extended mode) is stuck while disposing. The issue remains only for extended ide, simple reloads fine. Would appreciate if you could find the problem and fix it

[kaisalmen]

Thank you for the feedback.

[kaisalmen]

Hi @asimaranov restarting the complete views service is wrong. I will change the example to not allow it. We don't have start in the wrapper example and that makes sense.

But the root cause for the problem is really that this is not clear to the end user and one of the reasons I opened #919

[asimaranov]

But the problem is, in my service the editor is unmounted because it's shown in a modal window. When user closes the modal with editor and opens it again, the editor isn't loaded. How to make it load when user re-opens the modal window?
The same occurs in next js when user clicks back button on page with editor and then goes there again. The editor doesn't appear then. I think we need to keep the button in example and make the editor work after unloading. Otherwise it's impossible to use it in many scenarios

[kaisalmen]

But the problem is, in my service the editor is unmounted because it's shown in a modal window.

Do really need to use the views service then?

The editor doesn't appear then. I think we need to keep the button in example and make the editor work after unloading. Otherwise it's impossible to use it in many scenarios

That is not generally true as you can see here: https://typefox.github.io/monaco-languageclient/ghp_react_statemachine.html Dipose and restart works.

Can you model your failure case in a unit test that outlines the expected behaviour and open a WIP PR? When you use vitest browser with headless=false (it is configured here) you can even observe what is rendered or not.

[asimaranov]

Yeah, I need the extended interface (file tree and search). React state machine example works because it doesn't have the extended interface

[kaisalmen]

Yes, we need to pin-point the error. Are you willing to support this by providing a unit test? Honestly, don't think about react first. Try to re-produce it without react/next.js.

[asimaranov]

Would appreciate any help in pin-pointing, because I'm not so familiar with the tooling you use

[kaisalmen]

It is no rocket-science. If you understand the examples, then you understand the tests as well, see here and here. There are more, of course. Clone the repo (if you haven't done this already), build and run the test and play around.

[asimaranov]

Thanks, I'll try