stately-xstate.edit not found

[butlerpaul]

After fresh install I get "Command 'XState: Open Visual Editor' resulted in an error. (command stately-xstate.edit not found)"

Is there some dependency I need to install?

[davidkpiano]

That's strange; what extension version and VS Code version do you have? I'm unable to reproduce this.

[butlerpaul]

VSCode 1.68.1 Ubuntu 22.04 and 20.04 - same error xstate vscode extension 1.8.3

[butlerpaul]

Are you able to reproduce? I have updated VSCode to 1.69 and still see this issue.

[davidkpiano]

Unfortunately, I am not. I am on macos though, so I will have to try on Ubuntu.

[Andarist]

@butlerpaul would you be open to scheduling a call or something to go through this problem together in an attempt to gather more information? We've tried to look into it and reproduce but we couldn't do it so far

[butlerpaul]

Sure. Happy to help.

[butlerpaul]

Git it working.... pilot error!

[Andarist]

Do you know what was wrong with your setup?

[jean-smaug]

👋 Hi, I'm reproducing on MacOS
It's a fresh install of the extension.

Version : 1.69.1
Validation : b06ae3b2d2dbfe28bca3134cc6be65935cdfea6a
Date : 2022-07-12T08:21:51.333Z
Electron : 18.3.5
Chromium: 100.0.4896.160
Node.js : 16.13.2
V8 : 10.0.139.17-electron.0
Système d’exploitation : Darwin x64 21.5.0

[jean-smaug]

The problem was fixed after sign in.

[Andarist]

Does it happen again if you log out?

[davidkpiano]

If this is an authentication issue, we are removing the need for authenticating to use the extension soon.

[trystately]

7/25/2022 - also seeing this issue. Here are the steps I took.

• Installed XState VSCode extension

  Name: XState VSCode
  Id: statelyai.stately-vscode 
  Description: Visual editing, autocomplete and typegen for XState
  Version: 1.8.3
  Publisher: statelyai
  VS Marketplace Link: https://open-vsx.org/vscode/item?itemName=statelyai.stately-vscode
  

• Created a simple sign-in machine on https://stately.ai

• Exported the file to machine.json

   {
     "id": "sign-in",
     "initial": "init",
     "states": {
       "init": {
         "on": {
           "start": {
             "target": "initializing"
           }
         }
       },
       "initializing": {
         "on": {
           "success": {
             "target": "signing-in"
           },
           "failed": {
             "target": "failed"
           }
         }
       },
       "signing-in": {
         "on": {
           "success": {
             "target": "signed in"
           },
           "failed": {
             "target": "failed"
           }
         }
       },
       "failed": {},
       "signed in": {}
     }
   }

• Opened file in VSCode

• Tried XState: Open in Visual Editor command. Observed this error

  

• Tried XState: Sign in to Stately command. Observed this error

  

For what it's worth I'm on macOS Catalina 10.15.7
I created the original machine in Firefox 102.0.1 (64 bit)

[akrea]

Hi

Is there an update on this issue? Version 1.71.2 installed...

Thank you

[davidkpiano]

What version of the XState extension are you using?

You can find it from the extension page:

[WilkinsKa1]

Hello,

I'm also having this issue when trying to use either the visualizer or inspector commands:

VSCode version: 1.71.2 (Universal)
Xstate extension version: v1.10.0

[Andarist]

How do you attempt to trigger those commands? Do you see any errors in the VS Code developer tools (cmd+p -> "Developer: Toggle Developer Tools")?

[wohanley]

Same here. Linux, VS Code v1.71.2, XState extension v1.10.0. Opening a JSON file containing an XState machine definition then doing Ctrl+Shift+P ">XState: Open Visual Editor" gives me "Command 'XState: Open Visual Editor' resulted in an error. (command stately-xstate.edit not found)". Nothing in the VS Code developer tools console and nothing in any of the output logs as far as I can see, not that I'd know where to look. Happy to help debug.

[wohanley]

Ah, I think I understand the problem now. All I had in my project was machine.json, but the extension activates for JS/TS files. So, I made a TS file with

import { createMachine } from 'xstate';

const machine = createMachine(...);

just like the https://stately.ai/viz example, and it works. I misunderstood what the extension was expecting.

[akrea]

Ah, I think I understand the problem now. All I had in my project was machine.json, but the extension activates for JS/TS files. So, I made a TS file with

import { createMachine } from 'xstate';

const machine = createMachine(...);

just like the https://stately.ai/viz example, and it works. I misunderstood what the extension was expecting.

I figured this out too! The machine has to be "declared" before stately starts working.

[Andarist]

I figured this out too! The machine has to be "declared" before stately starts working.

Could you describe what do you mean in more detail?

[akrea]

Well: I expectetd the extension show an empty window where I could start inserting states, while it provides the code on the other half of the vertically split window. But in order to be able to "open" the xstate extension you need to provide the minimal code snippet in a file. Only then the extension works. Providing this code snippet is also the trigger when the "Open Visual Editor | Open Inspector" options are shown in the code window.

Hope this helps.

[Andarist]

Ah yes, this makes sense - we could have a "create new machine" command or something like that.

[yureckey]

I have this problem too.
Just installed xstate vscode extension (1.10.0) in Quasar generated app (Vue3)

[glimmbo]

+1 With some errors being found in the RUNTIME STATUS tab of the extension page:

[Andarist]

are you using tab-based indentation by any chance?