Bug: Cannot use VSCode visual editor. Visual changes are not saving

[cpetzel]

When using the VSCode visual editor, changes are not applying to the source file.

I've tried disabling and uninstalling the plugin, with no luck.

Here is the stack trace error in the console output...

2023-03-05 10:01:33.619 [error] Error: Request applyMachineEdits failed with message: Unexpected token (12:151)
    at handleResponse (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329558:40)
    at processMessageQueue (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13)
    at Immediate.<anonymous> (/Users/craig/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11)
    at processImmediate (node:internal/timers:466:21)

Version: 1.76.0 (Universal)
Commit: 92da9481c0904c6adfe372c12da3b7748d74bdcb
Date: 2023-03-01T10:23:45.993Z (4 days ago)
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: Yes

[cpetzel]

Reproduction steps...

1. Create a new file machine.ts
2. Enter the following

   
   import { createMachine } from "xstate";

createMachine({})

3. Click "Open Visual Editor"
4. Make visual edits to the machine. 
observe the only text changes in the source file, is the @xstate-layout meta information... 
```typescript

createMachine({
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgAoBbAQwGMALASwzAEp8QAHLWKgFyqw0YA9EAjACZ0AT0FDkU5EA */})

---

If I enter any information into the machine config JSON, then it works properly... This issue only seems to occur if the config json is empty. Example: Starting with this typescript and then opening the visual editor, all works fine

createMachine({
    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgAoBbAQwGMALASwzAEp8QAHLWKgFyqw0YA9EAjACZ0AT0FDkU5EA */
    id: 'test'
})

[garethloot]

I am getting a similar error/problem.

Any edit i do in the Visual editor is not applied to the state machine file. I tried with new empty machines and also machine copied from the web visualizer. To mee it seems that it has some thing to do with de layout string that is added to the file.

https://xstate.js.org/viz/

Things i tried.

• Restart vscode
• reinstall xstate extension

I am running on a m2 mac mini

2023-03-11 11:46:04.408 [error] Request applyMachineEdits failed with message: Unexpected token (3:178): Error: Request applyMachineEdits failed with message: Unexpected token (3:178) at handleResponse (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329557:40) at processMessageQueue (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13) at Immediate. (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11) at processImmediate (node:internal/timers:466:21)

2023-03-11 11:44:35.756 [error] Request applyMachineEdits failed with message: Changing transition path requires the transitionPath ([on, Event 1, 0]) to exist on the source state ([]): Error: Request applyMachineEdits failed with message: Changing transition path requires the transitionPath ([on, Event 1, 0]) to exist on the source state ([]) at handleResponse (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329557:40) at processMessageQueue (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329395:13) at Immediate. (/Users/gareth/.vscode/extensions/statelyai.stately-vscode-1.13.0/dist/index.js:329381:11) at processImmediate (node:internal/timers:466:21)

[philschonholzer]

The extension does not change the machine-file anymore in any project, except the first one that I used it in. Now I get the following errors:

2023-04-20 12:16:16.172 [info] ExtensionService#_doActivateExtension statelyai.stately-vscode, startup: false, activationEvent: 'onLanguage:typescript'
2023-04-20 12:16:31.375 [error] Error: Request applyMachineEdits failed with message: Unexpected token (4:211)
    at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
    at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
    at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
    at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:16:33.653 [error] Error: Request applyMachineEdits failed with message: Could not find state
    at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
    at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
    at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
    at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:07.914 [error] Error: Request applyMachineEdits failed with message: Unterminated comment. (4:7)
    at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
    at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
    at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
    at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:19.592 [error] Error: Request applyMachineEdits failed with message: Unterminated comment. (4:7)
    at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
    at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
    at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
    at process.processImmediate (node:internal/timers:466:21)
2023-04-20 12:21:21.844 [error] Error: Request applyMachineEdits failed with message: Could not find state
    at handleResponse (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231834:40)
    at processMessageQueue (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231672:13)
    at Immediate.<anonymous> (/Users/philipschonholzer/.vscode/extensions/statelyai.stately-vscode-1.14.1/dist/index.js:231658:11)
    at process.processImmediate (node:internal/timers:466:21)

[Andarist]

Are you using a tab-based indentation in the affected files by any chance?

[philschonholzer]

Are you using a tab-based indentation in the affected files by any chance?

Yes, it's the tabs!

[garethloot]

Yes tabs as well and going to spaces fixes the problem

[cosentino-lutech]

Same problem here (also with a brand new machine). Converting the machine file to spaces didn't fix the problem in my case (it was already spaces actually).

Installing the 1.10.0 old version (as suggested here https://github.com/statelyai/xstate-tools/issues/269#issuecomment-1343403121) solves the saving problem but breaks my current maching layout (maybe i'm using recent feature), so it's not a feasable solution.

Here is one of the errors i'm getting: 2023-08-09 10:16:44.851 [error] Error: Request applyMachineEdits failed with message: Unexpected token (16:6836) at handleResponse (c:\Users\m2cosentino.vscode\extensions\statelyai.stately-vscode-1.14.3\dist\index.js:76950:40)

VS Code: 1.81.0 XState VSCode Extension: v1.14.3 Node.js: v18.16.0

[davidkpiano]

Same problem here (also with a brand new machine). Converting the machine file to spaces didn't fix the problem in my case (it was already spaces actually).

Installing the 1.10.0 old version (as suggested here #269 (comment)) solves the saving problem but breaks my current maching layout (maybe i'm using recent feature), so it's not a feasable solution.

Here is one of the errors i'm getting: 2023-08-09 10:16:44.851 [error] Error: Request applyMachineEdits failed with message: Unexpected token (16:6836) at handleResponse (c:\Users\m2cosentino.vscode\extensions\statelyai.stately-vscode-1.14.3\dist\index.js:76950:40)

VS Code: 1.81.0 XState VSCode Extension: v1.14.3 Node.js: v18.16.0

Can you share a screenshot of what the code is and what you see in the editor?

[cosentino-lutech]

Can you share a screenshot of what the code is and what you see in the editor?

Sure, here you go:

Am I doing something wrong? Thanks

[ContrerasA]

For me I was able to find a solution found in this other bug report it seems that prettier is breaking the 2 way communication https://github.com/statelyai/xstate-tools/issues/293

Adding machine files to .prettierignore fixed the two way communication for me instantly

[cosentino-lutech]

Unfortunately the .prettierignore solution didn't work for me. I even tryed to disable all other extensions (Prettier and other) and to reinstall XState extension but the problem persists.

Version: 1.81.1 (user setup) Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794 Date: 2023-08-09T22:22:42.175Z Electron: 22.3.18 ElectronBuildId: 22689846 Chromium: 108.0.5359.215 Node.js: 16.17.1 V8: 10.8.168.25-electron.0 OS: Windows_NT x64 10.0.22621