Simple machine configuration breaks the visualizer

[davidlav]

Description

First off, apologies for the bad title, but I really have no insight into what's not working. Feel free to rename.

My, seemingly simple, machine won't render. It's not a terribly sensible machine, but that's because I reduced it from 182 lines to about 25 to produce a minimum-non-functioning example.

Expected Result

The machine config should render correctly, as it does in the old visualizer:

Actual Result

The new visualizer just hangs on "Visualizing machine...".

With the following console errors:

Chrome

Firefox

Reproduction

Enter the following into stately.ai/viz:

import { createMachine } from "xstate";

createMachine({
  id: "Top",
  initial: "first",
  states: {
    first: {
      on: { MOVE: "second" },
    },
    second: {
      initial: "firstSubstate",
      states: {
        firstSubstate: {
          on: {
            BACK: "#Top.first.",
            NEXT: "secondSubstate",
          },
        },
        secondSubstate: {
          initial: "subSubState",
          states: { subSubState: {} },
        },
      },
    },
  },
});

Additional context

Several things seem to "solve" the problem:

1. Removing the BACK transition

2. Removing the NEXT transtition

3. Removing the subSubState from the secondSubstate

4. Strangest of all, adding an additional, thirdSubstate to second (line 23)