Bug: XState Inspect 0.8.0 doesn't work with XState 5.0.0-beta9

[skyberd]

Description

You cannot inspect state machines that use v5 of XState using @xstate.inspect v0.8.0 I think a new beta release of xstate inspect is required.

Expected result

I expect inspect to work

Actual result

When starting my node server I get the following error:

(this will be run only when your dependencies or config have changed)
✘ [ERROR] No matching export in "node_modules/xstate/dist/xstate.esm.js" for import "toEventObject"

    node_modules/@xstate/inspect/es/browser.js:2:34:
      2 │ import { interpret, toSCXMLEvent, toEventObject, toObserver, toActorRef } from 'xstate';
        ╵                                   ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/xstate/dist/xstate.esm.js" for import "toActorRef"

    node_modules/@xstate/inspect/es/browser.js:2:61:
      2 │ import { interpret, toSCXMLEvent, toEventObject, toObserver, toActorRef } from 'xstate';
        ╵                                                              ~~~~~~~~~~

Reproduction

This cannot be reproduced in the code sandbox

Additional context

No response

[Andarist]

I think a new beta release of xstate inspect is required.

Yes, this. v5 is a work in progress though and the tooling around it will be released once it settles a little bit more.

[skyberd]

I think a new beta release of xstate inspect is required.

Yes, this. v5 is a work in progress though and the tooling around it will be released once it settles a little bit more.

Glad I'm not missing anything!

I've taken a look at the dev branches of xstate-viz and inspect to see if I could run it locally but it doesn't appear that any combination of the published branches are compatible with each other and v5? Totally appreciate its still in Beta but if there is a combo of tools and branches that enable using inspect with v5 that would be awesome.

[davidkpiano]

I think a new beta release of xstate inspect is required.

Yes, this. v5 is a work in progress though and the tooling around it will be released once it settles a little bit more.

Glad I'm not missing anything!

I've taken a look at the dev branches of xstate-viz and inspect to see if I could run it locally but it doesn't appear that any combination of the published branches are compatible with each other and v5? Totally appreciate its still in Beta but if there is a combo of tools and branches that enable using inspect with v5 that would be awesome.

Working on this today; will keep you updated.

[inverted-capital]

WIP is happening here: https://github.com/statelyai/xstate/pull/4082

[davidkpiano]

WIP is happening here: #4082

Thanks! This is very close to being merged in. Just needs some cleanup and the @Andarist stamp of approval.

[ntvinhit]

WIP is happening here: https://github.com/statelyai/xstate/pull/4082

Looks like it doesn't work with the current official v5 :(

[davidkpiano]

WIP is happening here: #4082

Looks like it doesn't work with the current official v5 :(

Still experimental, but I recommend using @statelyai/inspect instead, which works with XState v5 and has an API to work with anything else (even non-XState code):

https://github.com/statelyai/inspect

[ntvinhit]

I tried with @statelyai/inspect But it just open a new tab with src: https://stately.ai/inspect.

And it shows "404 Page Not Found".

So I assume it won't work event with new library @davidkpiano

[davidkpiano]

I tried with @statelyai/inspect But it just open a new tab with src: https://stately.ai/inspect.

And it shows "404 Page Not Found".

So I assume it won't work event with new library @davidkpiano

For now, set the url to https://stately.ai/registry/inspect

[ntvinhit]

For now, set the url to https://stately.ai/registry/inspect

@davidkpiano Thank you, it works now but the events doesn't reflect to the inspector. But it's absolutely okay for me because I just want to view the statechart.

FYI: I tried to use the inspector in iframe mode but looks like I can't login (it force me to login to see the content). I tried to log in with Google but of course we cant do that because Google has X-Frame-Options: deny.

I tried to Reset password but after I clicked the Reset link, it login automatically instead of letting me to update the password.

=> I have to use the windows mode.

[davidkpiano]

We will be removing the login for the inspector soon.

[davidkpiano]

Closing as this should now work as expected with @statelyai/inspect: https://github.com/statelyai/inspect