Values of nested objects become undefined

[octet-stream]

Summary

Tested valtio versions: 1.9.0, 1.10.0, 1.10.1, 1.10.2. This behaviour first appears in 1.10.1.

In my example Next.js app, starting from the valtio@1.10.1, every value of nested proxy object becomes undefined, while the keys copied just fine. In the app I use React Context to simplify access to the store: For each Context.Provider provided with the page data, a new proxy is created. The main page has a collection of objects within that main state object, for which I also create a new proxy using Context.Provider. For each created nested object state, I see the keys of that object as expected, but then all the values are gone and replaced with undefined.

Steps to reproduce

1. First, to run the app you'll need docker compose (not docker-compose).
2. Clone repository with the only necessary branch, then navigate to the app directory: git clone -b valtio-issue --single-branch git@github.com:octet-stream/next-mikro-orm-trpc-template.git valtio-issue && cd valtio-issue
3. If you're macOS user, just run npm run demo --build command. It will pull MySQL image used by the app, then build the app itself and start it. After you've done with the demo, press Ctrl+C to stop the app and MySQL.
   3.1. On Linux/Windows you might need to setup the app manually: install dependencies npm install
   3.2 Run npm run test:compose-up to pull mysql image and run it
   3.3 Run npm run build && npm run start to build and start the app (or run npm run dev to start the app in development mode).
   3.4 Once you finished with the demo, run npm run test:compose-down to stop MySQL
4. Once the app is up and running, open http://localhost:3000, then create a new note. After the note is created, you will see that no data is presented within cards. Then if you refresh the page, the result will be the same: You'll see empty note card(s).

Screenshot with the result

Also, if you open browser DevTools console, you can see that notes object has values, as expected. Even for nested objects within notes.items collection. But then in store created for each individual object from this collection the values are undefined.

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

[dai-shi]

Hi, thanks for reporting.

Would you be able to drill down and create a very small reproduction with https://codesandbox.io/s/react-new ? (without next.js)

This behaviour first appears in 1.10.1.

That's very helpful.
https://github.com/pmndrs/valtio/releases/tag/v1.10.1
#654 or #656 can be the one, or both.
Can you try the each build?
https://ci.codesandbox.io/status/pmndrs/valtio/pr/654
https://ci.codesandbox.io/status/pmndrs/valtio/pr/656

[octet-stream]

Tested with the links you provided:

• With refactor(vanilla): simplify handling object descriptor #654 - issue is there: https://codesandbox.io/s/unruffled-thompson-dehef9
• With fix(vanilla): improve snapshot creation ignoring object setters in prototype #656 - no issues: https://codesandbox.io/s/dazzling-shockley-1yild4
• And with 1.10.2 - the issue is there: https://codesandbox.io/s/upbeat-snow-z6yd3d

[dai-shi]

Oh, okay. It's because you create a new proxy from a snapshot.
While I'm not sure if there's a better practice, it should be fixed anyway.
Let me create a failing test and work on it.
Thanks for the reproduction!

[dai-shi]

#673 should fix it: https://codesandbox.io/s/sharp-gianmarco-3b39wf