Xstate: [xstate/inspect] payload of the event is undefined.

Created on 7 Sep 2020  路  3Comments  路  Source: davidkpiano/xstate

Description
When xstate inspect is enabled payload of the event is undefined.

  1. take a data machine from https://github.com/cypress-io/cypress-realworld-app/blob/develop/src/machines/dataMachine.ts

  2. create a second machine and extend it with config and pass down any fetchData service

  3. add xstate/inspect to the app
  4. start the app and with inspector

in your app view where you send the event with payload: {id} like send('FETCH', { id: context.root.$route.params.basketId })

Expected Result
payload should contain the id

Actual Result
payload is undefined

Reproduction
we can do a call and i can show it to you.

toggle the comment
// { devTools: false }
sandbox

If you remove { devTools: true } from the machine hook everything works

Additional context
happens with
"@vue/composition-api": "^0.3.4",
"@xstate/inspect": "^0.1.0",
"@xstate/vue": "^0.1.1",

馃攷 @xstatinspect

Most helpful comment

Thanks @davidkpiano for the quick fix, it works properly now. I am working on a presentation for Connect.tech to explain how to use xstate with React and was hoping to use the inspector. Awesome project!

All 3 comments

I am seeing the same thing. I just discovered last night. In my app, when I add the @xstate/inspect call, the events are ending up being empty so things break. As soon as I remove the inspect call everything works again. It seems to be specifically related to inspect, since devTools: true is fine as long as inspect is not called.

Here's a fork of the your xstate reddit example, using the latest dependencies, and just adding @xstate/inspect with devTools: true.
When you select a subreddit, first selection works, then anything after fails. If you turn off devTools: true or remove the inspect call then everything works fine.
https://codesandbox.io/s/xstate-react-reddit-example-with-actors-forked-0stml?file=/src/index.js

Here is fork of your xstate todo example with updated dependencies. Just enabling devTools: true (even without inspect) makes it fail. This may be a separate issue since it is failing as soon as devTools: true is enabled.
https://codesandbox.io/s/xstate-todomvc-forked-q9hqs?file=/Todos.jsx

Fixed in @xstate/inspect version 0.1.1

Thanks @davidkpiano for the quick fix, it works properly now. I am working on a presentation for Connect.tech to explain how to use xstate with React and was hoping to use the inspector. Awesome project!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hnordt picture hnordt  路  3Comments

ifokeev picture ifokeev  路  3Comments

kurtmilam picture kurtmilam  路  3Comments

doup picture doup  路  3Comments

3plusalpha picture 3plusalpha  路  3Comments