Bug: React fash refresh crashes with element reference in machine context

[jaykay-p]

XState version

XState version 5

Description

Encountered a crash in react during fast refresh when a DOM element reference exists in the context. This issue is demonstrated in the following video, where a console log change triggers a reload:

Screen.Recording.2023-12-29.at.8.22.21.PM.mov

However, changing the element reference to null and then triggering a reload avoids the crash, as shown here:

Screen.Recording.2023-12-29.at.8.23.30.PM.mov

Expected result

refresh seamlessly without crashing

Actual result

crashes to an error page in nextjs

Reproduction

https://stackblitz.com/edit/github-nvyntj?file=src%2FelementMachine.ts,src%2FApp.tsx

Additional context

No response

[Andarist]

The problem lies in this call:

xstate/packages/xstate-react/src/useActorRef.ts

Lines 28 to 30 in 0b08a60

	snapshot: (actorRef.getPersistedSnapshot as any)({
	__unsafeAllowInlineActors: true
	})

DOM elements are circular and our persistContext recurses indefinitely there. This is a general problem - not related specifically to Fast Refresh.

I'll analyze this situation in more depth to figure out what we should do about it in both scenarios (plain getPersistedSnapshot call and the same call performed as part of Fast Refresh).

[ksaldana1]

I ran into this issue today where I had StateMachine definitions in context. It wasn't necessary for those to exist in context so was easy to remove, but in case someone else runs into fast refresh blowing up.