Error with value change before initialization

Hi, thanks a lot for your work!

Most things are working fine for me and it is nice to get rid of the external loader.

I realized, that your script crashes, if there are any changes (e.g. of the value) before the editor is initialized. At the moment, I check if the ref is set before updating the value, otherwise I get: Uncaught TypeError: Cannot read property 'setValue' of undefined The same happens at least to the options and language props.

It looks to me like the useUpdate hook should check that but somehow does not work like intended?

CodeSandbox with the error: https://codesandbox.io/embed/monaco-editor-react-4bvf0 If check for the mounted editor on language and value it will work (l. 46 to l. 50).

[suren-atoyan]

Thank you for taking the time to open this issue. 👍

We examined your issue. As you mentioned the problem is when the developer changes value or language (or other property of editor) before the editor is mounted, script crashes.

The monaco editor is not a usual react component and it depends on external sources to be mounted, that’s why we are getting an asynchronous didMount, which is out of react control.

The only thing that is missing here, is the error message about not interacting with the editor until it is mounted. So, in the future versions, in this particular case, you should see such kind of error - You can't interact with the editor until it's not mounted. You can be informed about it in editorDidMount prop. For more please read docs. Something like this.

Should useUpdate check it? Of course no, otherwise it would totally be a “workaround” (it should apply updates only when the editor is mounted, also it should store the last update right before the editor is mounted to perform accurate changes). And technically we can implement that workaround, but we are trying to avoid it.

And as we used this library in lots of projects and have not faced such kind of problems, we think that we can skip it at least for now.

Based on our experience of using such kind of editors in projects we can suggest keeping an “isEditorReady” flag in your global store; that would be helpful to disable all parts of your application which are going to interact with the editor until it’s mounted.

About example: In your codesandbox example you don’t need to check isEditorReady flag during passing language and value; a better way to avoid error is checking isEditorReady flag before calling toggleLanguage. You can check this one.

Thank you!

[suren-atoyan]

Glad to hear that 🙂