Open
Description
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
Labels
No labels