Skip to content

TypeError: Cannot read properties of undefined (reading 'config') #41

Open
@mutewinter

Description

@mutewinter

When inspecting a state machine that is defined in React via useMachine, I'm getting a crash of the inspector:

Looks like you've ended up in an invalid state. Refresh the page to retry.

The stack error and stack trace are:

_app-a1433d7431381a0c.js:647 TypeError: Cannot read properties of undefined (reading 'config')
    at 2471-4f879e2487bb6b05.js:1:16681
    at uU (framework-22003fc7e17fa3a0.js:9:84107)
    at o$ (framework-22003fc7e17fa3a0.js:9:113157)
    at framework-22003fc7e17fa3a0.js:9:111543
    at oU (framework-22003fc7e17fa3a0.js:9:111609)
    at oP (framework-22003fc7e17fa3a0.js:9:96238)
    at r8 (framework-22003fc7e17fa3a0.js:9:44812)
    at framework-22003fc7e17fa3a0.js:9:93602

Here's the minified code that is crashing:

    function ed(e) {
      var t;
      let {machine: s, state: r, isSelected: i} = e
        , l = er.S.machines.getDigraphConfigs.useMutation();
      (0,
      C.useEffect)( () => {
        l.mutate({
          // Crashes on this tRPC call because s isn't defined.
          definition: "createMachine(".concat(JSON.stringify(s.config), ")")
        })
      }
      , []);

I believe what's happening is a race condition. As I stepped through the XState Inspector window with breakpoints, I was able to get the inspector past this moment in the code without error. Then the inspect app rendered fine, until I reloaded the parent page.

I don't have a minimal reproduction right now, but I can stop this from happening immediately if I delay the initial events sent to the machine from the React component.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions