Bug: React Context Typescript not resolving children actors when selected

[AllanFerencz-Lee]

XState version

XState version 5

Description

I'm new to XState and still learning to use it effectively. I'm unsure if I ran into a bug or if I'm using the library unintentionally.

Problem

I've been struggling for countless hours on this issue. Hopefully, someone has a solution.

My goal is to select context values and send events to a child machine actor of a root machine.

The core of my issue - Typescript doesn't narrow to the selected child actor. This happens once multiple actors are set up on the machine. When I console log the selected actor - It does have the correct value I'm looking for. I've included examples below.

The Error

Property 'context' does not exist on type 'PromiseSnapshot<AuthUser, NonReducibleUnknown> | MachineSnapshot<{ count: number; }, { type: "inc"; } | { type: "dec"; }, {}, {}, string, NonReducibleUnknown, MetaObject, { ...; }>'.
  Property 'context' does not exist on type '{ status: "active"; output: undefined; error: undefined; } & { input: NonReducibleUnknown; }'.ts(2339)

Console logging the values outputs the expected actor

I was able to reproduce the issue on code sandbox.

Navigate to App.tsx to see the comments. https://codesandbox.io/p/devbox/busy-mopsa-n2crkj?workspaceId=ws_NiJ4KeBNbFceadwTQwz1Xf

The child machine is invoked in the initial state of the machine.

Is this a bug with XState or am I doing something wrong?

Expected result

Typescript narrowing should find the targeted actor.

Actual result

Typescript fails to narrow to the selected child actor.

Reproduction

https://codesandbox.io/p/devbox/busy-mopsa-n2crkj?workspaceId=ws_NiJ4KeBNbFceadwTQwz1Xf

Additional context

No response

[davidkpiano]

Taking a quick look at this, it seems like you don't have the types for the actors set up.

See here: https://stately.ai/docs/actors#actors-and-typescript

[AllanFerencz-Lee]

Thank you so much for your quick response. I really appreciate it.

I put the actors in the setup function like this.

I've tried several different iterations but can't get it right.

What am I missing that I need to add?

[AllanFerencz-Lee]

Do any examples exist that have something similar to what I'm trying to do?

1. A Root machine that contains multiple actors
2. One actor is anything that's not a machine
3. One actor is another machine
4. Select context data from the child machine
5. In typescript

[yotov]

Do any examples exist that have something similar to what I'm trying to do?

1. A Root machine that contains multiple actors
2. One actor is anything that's not a machine
3. One actor is another machine
4. Select context data from the child machine
5. In typescript

Hey AllanFerencz-Lee, I came across the same problem and found the solution. It's not well documented in xState documentation, but there is an example in the changelog of 5.0.0 version ( search for Children IDs in combination with setup can now be typed using types.children )

TLDR: You need to set an id inside invoke for your childMachine and then you should add

types: {
    children: {} as {
        'THE_INVOKE_ID':'childMachine'
    }
}