statelyai / xstate-viz

Visualizer for XState machines
https://stately.ai/viz
MIT License
434 stars 102 forks source link

Bug: Visualizer breaks silently with a console error (and gets stuck on "Visualizing machine") #363

Open owaiswiz opened 2 years ago

owaiswiz commented 2 years ago

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

owaiswiz commented 2 years ago

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.