Bug: After 5.5, type of state.context from @xstate/react useMachine being inferred incorrectly with @xstate/react < 4.0.2

[pckilgore]

XState version

XState version 5

Description

Updated from 5.4 -> 5.5

Expected result

Everything works, everything compiles (patch change).

Actual result

New type errors (state.context values being inferred to any instead of the correct type).

Reproduction

link here

Additional context

"@xstate/react@^4.0.0": version "4.0.1" resolved "https://registry.yarnpkg.com/@xstate/react/-/react-4.0.1.tgz#a5cec511e23e44ac5dd64852a1497efb6434c3f0" integrity sha512-UB9qUC11wcaYd05wGea0mvEA3uTHikNaB4InMZfxD7MVFxzBFU+3JFkemjiN8bDdPJfDrObyP9ZPDVojq2LytA== dependencies: use-isomorphic-layout-effect "^1.1.2" use-sync-external-store "^1.0.0"

typescript@^5.0.0: version "5.3.2"

[davidkpiano]

Can you please share a code reproduction?

[pckilgore]

I can fix by upgrading @xstate/react to 4.0.2. Repro by reverting to 4.0.1

repro based on xstate/react version

```console (✓) 14:40:27 [~/gravity/monorepo/src/www::renovate/xstate-monorepo] $ yarn yarn install v1.22.19 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 2.69s. $ git diff diff --git a/src/www/yarn.lock b/src/www/yarn.lock index e9ba93a5b..080f19816 100644 --- a/src/www/yarn.lock +++ b/src/www/yarn.lock @@ -3085,9 +3085,9 @@ react-refresh "^0.14.0" "@xstate/react@^4.0.0": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@xstate/react/-/react-4.0.1.tgz#a5cec511e23e44ac5dd64852a1497efb6434c3f0" - integrity sha512-UB9qUC11wcaYd05wGea0mvEA3uTHikNaB4InMZfxD7MVFxzBFU+3JFkemjiN8bDdPJfDrObyP9ZPDVojq2LytA== + version "4.0.2" + resolved "https://registry.yarnpkg.com/@xstate/react/-/react-4.0.2.tgz#97193ba96129e0cebf0ac7245dd355b723c1e37c" + integrity sha512-t5Xau/H8nS9nlowV+72RneqaQ/wqkQ8C/8ij4gEvHcoCQptc2REgZkjOpV74xyTabUZnUeYwdDTsMmz5ot3S+Q== dependencies: use-isomorphic-layout-effect "^1.1.2" use-sync-external-store "^1.0.0" (✓) 14:40:34 [~/gravity/monorepo/src/www::renovate/xstate-monorepo] $ yarn tsc yarn run v1.22.19 $ /Users/kilgore/gravity/monorepo/src/www/node_modules/.bin/tsc ✨ Done in 3.18s. (✓) 14:40:42 [~/gravity/monorepo/src/www::renovate/xstate-monorepo] $ yarn add xstate/react@4.0.1 yarn add v1.22.19 [1/4] 🔍 Resolving packages... error An unexpected error occurred: "https://registry.yarnpkg.com/xstate%2freact: Request \"https://registry.yarnpkg.com/xstate%2freact\" returned a 405". info If you think this is a bug, please open a bug report with the information provided in "/Users/kilgore/gravity/monorepo/src/www/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. (✖ - 1) 14:41:06 [~/gravity/monorepo/src/www::renovate/xstate-monorepo] $ yarn add @xstate/react@4.0.1 yarn add v1.22.19 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ @xstate/react@4.0.1 info All dependencies └─ @xstate/react@4.0.1 ✨ Done in 2.35s. (✓) 14:41:15 [~/gravity/monorepo/src/www::renovate/xstate-monorepo] $ yarn tsc yarn run v1.22.19 $ /Users/kilgore/gravity/monorepo/src/www/node_modules/.bin/tsc [SNIP].tsx:203:28 - error TS7006: Parameter 'error' implicitly has an 'any' type. 203 {errors.map((error, i) => ( ~~~~~ [SNIP].tsx:203:35 - error TS7006: Parameter 'i' implicitly has an 'any' type. 203 {errors.map((error, i) => ( ~ Found 2 errors in the same file, starting at: src/components/discovery/AddSiteFlow.tsx:203 error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ```

[pckilgore]

Can you please share a code reproduction?

wow, what a pain.

You might want to add a note in the template that with new packages in codesandbox, you have to manually install the right version of the package using the codesandbox internal terminal and yarn cli, not the UI, which won't do it (I assume because of newness, at least).

link here

[Andarist]

Repro: TS playground.

It's not great that the compatibility between xstate@5.5.0 and @xstate/react@4.0.1 has been broken but isn't the simplest thing to do here to update to @xstate/react@4.0.2? That works OK: TS playground. I mean - I'm not sure if we need any other resolution of this issue. I will recheck why it broke in the morning though.

[pckilgore]

Sure, that resolved it for us and avoids https://xkcd.com/979/

Leaving open for your tracking only.