Using XState extension in VSCode to edit state machine but the code is not updating accordingly

Question

I am using the Stately's state machine library called XState in my React(Typescript) project.

There is an official extension called "XState" for VSCode, so, I installed it.

After that, I wrote the initial code to create my state machine, then from the VSCode I can open the "visual editor" by clicking this:

It opens the XState visual editor in VSCode, but when I update the state machine visual diagram, the typescript code is not updating accordingly:

Then I go to the extension & noticed there are some error logs:

I tried rebooting VSCode, but that doesn't help. Anybody encountered this issue? How to solve it so that I can see live updating on code while I am editing the state machine diagram in editor?

Answer 1

Try adding an id to the machine first. Sorry, this is a tricky bug on our end!