Bug: Clientside hydration fails within React internals

[hamlim]

👋

Was trying to setup the repo locally before I dig in to the code, but it seems to fail for me locally when the client attempts to hydrate. I'm seeing the following error in the browser:

index.js:25371 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at preloadModule (index.js:25371:35)
    at resolveModule (index.js:26417:23)
    at processFullRow (index.js:26466:13)
    at processBinaryChunk (index.js:26553:13)
    at progress (index.js:26605:11)

Seems like preloadModule is expecting chunks to be present on metadata, but the metadata object only has async: false.

• Bun version is 1.0.0
• Commit hash of the repo: 5d7d5a001653e6eed12e1933fe39618956ada83c

Let me know if there's anything else I can share to help make it reproducible!

[johnforte]

It seems to be an issue with the router context

index.js:10403 The above error occurred in the <Context.Provider> component:

    at Router (http://localhost:3000/framework/client/index.js:26682:42)
    at MarzMount

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[hjonasson]

Same here. The above error referred to here looks like this for me

[hex2f]

Hmm, I can't seem to replicate this. Here's what I get:

leah@mcdonal:~/testa$ git clone https://github.com/hex2f/marz
Cloning into 'marz'...
remote: Enumerating objects: 43, done.
remote: Counting objects: 100% (43/43), done.
remote: Compressing objects: 100% (38/38), done.
remote: Total 43 (delta 4), reused 39 (delta 3), pack-reused 0
Receiving objects: 100% (43/43), 1.04 MiB | 3.49 MiB/s, done.
Resolving deltas: 100% (4/4), done.
leah@mcdonal:~/testa$ cd marz/
leah@mcdonal:~/testa/marz$ bun install
bun install v1.0.1 (31aec4eb)
 + @types/react@18.2.21
 + @types/react-dom@18.2.7
 + bun-types@1.0.1
 + react@18.3.0-canary-41f0e9dae-20230907
 + react-dom@18.3.0-canary-41f0e9dae-20230907
 + react-server-dom-webpack@18.3.0-canary-41f0e9dae-20230907

 15 packages installed [16.00ms]
 leah@mcdonal:~/testa/marz$ bun run index.tsx
[6.32ms] create ssr router index
[0.18ms] resolve /home/leah/testa/marz/pages/hello.tsx > react
[0.06ms] resolve /home/leah/testa/marz/node_modules/react/index.js > ./cjs/react.development.js
[0.05ms] resolve /home/leah/testa/marz/pages/index.tsx > ../components/counter
[0.06ms] resolve /home/leah/testa/marz/pages/index.tsx > ../framework/client/router/link
[0.09ms] resolve /home/leah/testa/marz/framework/client/router/link.tsx > ./useRouter
[0.02ms] resolve /home/leah/testa/marz/framework/client/router/useRouter.tsx > ./context
[52.18ms] bundle client deps
[0.51ms] build manifest
[5.17ms] bundle server routes
[10.05ms] create rsc router index
[0.11ms] reconcile routes
[81.40ms] total - compile marz app
[2.26ms] create worker
🚀 running
[105.52ms] RSC render /

and it loads correctly in the browser.

Which OS and browser are you on? Also does the issue go away after upgrading to Bun 1.0.1?

Edit: Ah, I can recreate it on macOS

[hex2f]

Ah, 🤦‍♀️ I had patched react-server-dom-webpack to debug a thing and forgot to remove it before pushing. Working on a fix now.