Bug: Actor with system ID '...' already exists. (v5)

[rlaffers]

Description

Invoked actors are not cleared from the system upon re-entry.

const machine = createMachine({
  initial: 'Listening',
  states: {
    Listening: {
      invoke: {
        systemId: 'listener', // <-- This will clash with the subsequently invoked listener
        src: fromCallback(() => {
          console.log('✅ invoked the listener')
          return () => {
            console.log('⛔ clearing the listener')
          }
        }),
      },
    },
  },
  on: {
    RESTART: {
      // reenters Listening, tries to invoke the listener, but:
      // 🪲 Actor with system ID 'listener' already exists.
      target: '.Listening',
    },
  },
})

Expected result

After receiving the RESTART event, the first listener is cleared first (its unsubscribe function should run), its systemId should be removed from actor.system, and then a fresh listener should be invoked.

Actual result

Error upon receiving the RESTART event:

Error: Actor with system ID 'listener' already exists.

Reproduction

https://codesandbox.io/s/optimistic-bush-7lh38j?file=/src/index.js

Additional context

This is an issue with xstate v5.
Occurs with: [email protected]

[Andarist]

The issue is caused by the fact that we defer stopping the previous child:

xstate/packages/core/src/actions/stop.ts

Lines 51 to 71 in eea74c5

	function executeStop(
	actorContext: AnyActorContext,
	actorRef: ActorRef<any, any> | undefined
	) {
	if (!actorRef) {
	return;
	}
	// this allows us to prevent an actor from being started if it gets stopped within the same macrostep
	// this can happen, for example, when the invoking state is being exited immediately by an always transition
	if (actorRef.status !== ActorStatus.Running) {
	actorContext.stopChild(actorRef);
	return;
	}
	// stopping a child enqueues a stop event in the child actor's mailbox
	// we need for all of the already enqueued events to be processed before we stop the child
	// the parent itself might want to send some events to a child (for example from exit actions on the invoking state)
	// and we don't want to ignore those events
	actorContext.defer(() => {
	actorContext.stopChild(actorRef);
	});
	}

but we register a new one in the system asap, when it's created. An actor instantiation is not deferred (and can't be deferred).

So the fix for this is to unregister the old actor from the system eagerly.