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

Question

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

cpetzel opened this issue a year ago · comments

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

Craig Petzel · Answer 1 · Mon Mar 06 2023 11:02:35 GMT+0800 (China Standard Time)

Reproduction steps...

Create a new file machine.ts
Enter the following

import { createMachine } from "xstate";

createMachine({})

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

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 · Answer 2 · Sat Mar 11 2023 18:57:27 GMT+0800 (China Standard Time)

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)

Philip Schönholzer · Answer 3 · Thu Apr 20 2023 18:30:08 GMT+0800 (China Standard Time)

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)

Mateusz Burzyński · Answer 4 · Thu Apr 20 2023 18:41:37 GMT+0800 (China Standard Time)

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

Philip Schönholzer · Answer 5 · Thu Apr 20 2023 18:50:20 GMT+0800 (China Standard Time)

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

Yes, it's the tabs!

garethloot · Answer 6 · Fri Apr 21 2023 02:09:26 GMT+0800 (China Standard Time)

Yes tabs as well and going to spaces fixes the problem

cosentino-lutech · Answer 7 · Wed Aug 09 2023 16:48:57 GMT+0800 (China Standard Time)

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

David Khourshid · Answer 8 · Wed Aug 09 2023 17:44:26 GMT+0800 (China Standard Time)

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 · Answer 9 · Wed Aug 09 2023 18:10:07 GMT+0800 (China Standard Time)

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

Anthony Contreras · Answer 10 · Wed Aug 16 2023 08:18:17 GMT+0800 (China Standard Time)

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
#293

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

cosentino-lutech · Answer 11 · Mon Aug 21 2023 17:13:55 GMT+0800 (China Standard Time)

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