xstate-viz

xstate-viz copied to clipboard

Description

A machine that can be visualized in XState editor, as well as the (legacy?) old visualizer at https://xstate.js.org/viz/, does not work on the new visualizer at: https://stately.ai/viz/27e372fa-0611-4ae1-9d49-ffbe53ecb4d8.

It emits a console error - TypeError: Cannot read properties of undefined (reading 'c') and the visualizer just gets stuck at the loading screen for "Visualizing machine".

Here's a minimal machine specification extracted from the real application:

import { createMachine, send } from "xstate";
export const videoPlayerMachine =
  createMachine({
    id: "demo",
    initial: "loaded",
    states: {
      loaded: {
        initial: "seeked",
        states: {
          seeked: {
            initial: "paused",
            states: {
              paused: {},
            },
          },
          seeking: {
            on: {
              SEEKED: {
                target: "seeked",
              },
            },
            after: {
              "750": {
                target: "seeked",
              },
            },
          },
        },
        on: {
          PROGRESS: {},
          SEEK: {
            target: "loaded.seeking",
          },
        },
      },
    },
  });

Expected result

This should have worked with the new visualizer as it works on the old one as well as on the editor.

Actual result

It does not and it emits a console error - TypeError: Cannot read properties of undefined (reading 'c') and the visualizer just gets stuck at the loading screen for "Visualizing machine".

Note If you remove PROGRESS: {}, it starts working. Or if you remove SEEK: {....}, it starts working. Or if you remove the on: {...} or after: {...} block in loaded.seeking, it starts working

Reproduction

https://stately.ai/viz/7437af7f-2072-4f88-8df6-2b7bfb1d6d04

Additional context

No response

Didn't realize https://github.com/statelyai/xstate-viz existed before creating this. That seems a more appropriate place for this issue. Feel free to move.