This content originally appeared on DEV Community and was authored by Tona
While I was working with my first project using XState, Astro and React I stumbled upon this nasty error.
Uncaught Error: You used a hook from "ActorProvider" but it's not inside a component.
I only found one issue in Github related to this HMR crash (under very specific circumstances)
// onboarding-form.ts
import { Step1 } from './step-1';
export const MachineContext = createActorContext(machine);
export function OnboardingForm() {
return (
<OnboardingMachineContext.Provider>
<Onboarding />
</OnboardingMachineContext.Provider>
);
}
Then I thought it was related to circular dependencies since I was importing the MachineContext in my Step1, then I created the context in a separate file onboarding-machine-context and import it
// onboarding-form.ts
import { Step1 } from './step-1';
import { MachineContext } from './onboarding-machine-context'
export function OnboardingForm() {
return (
<OnboardingMachineContext.Provider>
<Onboarding />
</OnboardingMachineContext.Provider>
);
}
And it fixed it. Hope this can help someone else.
This content originally appeared on DEV Community and was authored by Tona
Tona | Sciencx (2025-10-25T04:39:41+00:00) XState `ActorProvider` bug. Retrieved from https://www.scien.cx/2025/10/25/xstate-actorprovider-bug/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.