Valtio v2 - useSnapshot using useSyncExternalStore which fails on React v19.1.x

[enesozturk]

Bug Description

Hey team,

Sorry if this has been raised before, I've checked the previous issues/discussions but couldn't find exact same error.

We are using Valtio as state management in AppKit. And we have several React hooks that we expose to developers and these hooks using useSnapshot to subscribe to our Valtio states. See example hook here: https://github.com/reown-com/appkit/blob/main/packages/appkit/src/library/react/index.ts#L79-L89

So when I use this hook in a project where I'm using React 19.1.5, the app throws the following error to me:

stitched-error.ts:23 Uncaught Error: proxyState is not iterable
    at snapshot (vanilla.mjs:263:51)
    at useSnapshot.useSyncExternalStore[currSnapshot] (react.mjs:31:35)
    at mountSyncExternalStore (react-dom-client.development.js:7129:24)
    at Object.useSyncExternalStore (react-dom-client.development.js:23316:16)
    at exports.useSyncExternalStore (react.development.js:1236:34)
    at useSnapshot (react.mjs:21:24)
    at useAppKitProvider (index.ts:80:49)
    at Home (page.tsx:10:46)
    at ClientPageRoot (client-page.tsx:60:12)

Thought it might be our own implementation that we do some bad practice. We didn't get such an issue reported before. But if I downgrade my project to 19.0.0, this doesn't throw any error. So for <=19.0.0, it's okay.

I'm not quite sure if it's our implementation tho, but it's a bit hard to demonstrate what it could be. Appreciate your help.

Reproduction Link and Steps

To reproduce the issue, you could use our own monorepo to get it up and working really quick:

1. Clone the repo https://github.com/reown-com/appkit
2. pnpm install; pnpm build
3. Add lab env vars cp /apps/laboratory/.env.example /apps/laboratory/.env.local, use NEXT_PUBLIC_PROJECT_ID=b56e18d47c72ab683b10814fe9495694 (local only key)
4. Run pnpm laboratory in the root

Best

Reproduction Link

https://github.com/reown-com/appkit

[dai-shi]

Can you please try to create a smallest possible reproduction?

[overthemike]

I installed it an got it running on my machine with react 19.1.0 without seeing that error :. There were other errors in there (unique key prop, inline script execution and some icon manifest thing), but not what you're seeing. Is there an action or a link I can go to to replicate?

My "in the dark" guess is that you might be suffering from dual package hazard. Since you're importing the store from a different package "appkit", if you initialize valtio from within the app as well, this can happen.

[enesozturk]

@dai-shi @overthemike thanks for checking out guys. Firstly here is the minimal reproducible example: https://github.com/enesozturk/appkit-valtio-v2-test, It's simple Next.js app, I've switched the react and react-dom versions between 19.0.0 and 19.1.0. And with 19.1.0 I can reproduce the issue still. Make sure that you've cleaned the node_modules when switching between them and it's happening.

@overthemike;

There were other errors in there (unique key prop, inline script execution and some icon manifest thing), but not what you're seeing

Yeah we have those, will fix in my next PR, but should be unrelated.

you might be suffering from dual package hazard

I've been also thinking about it, but it's really confusing that this doesn't really happen <=19.1.0

[dai-shi]

I haven't had a chance to run it, but the source code of your reproduction seems clean. Nextjs uses bundled react/react-dom packages regardless of what's described in package.json.

I wonder if @overthemike can dig into it.

[overthemike]

@enesozturk I got the example installed and working but am still not able to reproduce the error either with 19.0.0 or 19.1.0. Is there a page or action to take to get the error to appear once the app has loaded?