next.js: Navigating between server component + client component page throws error - Cannot read properties of undefined (reading '')

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 16.15.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I visit a server component page and then visit a client component page, I will no longer be able to access the server component page I previously accessed. This is the same case when you have client components inside server component pages.

Flow:

  1. Run the Next.js app in development mode.
  2. Visit root server component page, i.e. /
  3. Visit client component page, i.e. /client-page
  4. Visit root server component page, i.e. /

Result: A white page and an error in my terminal/console.

event - compiled client and server successfully in 434 ms (198 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 206 ms (333 modules)
wait  - compiling /client-page/page (client and server)...
event - compiled client and server successfully in 124 ms (345 modules)
TypeError: Cannot read properties of undefined (reading '')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:327:14)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1934:55)
TypeError: Cannot read properties of undefined (reading '')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:327:14)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1934:55) {
  digest: '1544633764'
}

Expected Behavior

The page should render normally.

Link to reproduction

https://github.com/james-elicx/nextjs13-client-server-error-reproduction

To Reproduce

  1. Run the Next.js app in development mode.
  2. Visit root server component page, i.e. /
  3. Visit client component page, i.e. /client-page
  4. Visit root server component page, i.e. /

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 66
  • Comments: 48 (10 by maintainers)

Most upvoted comments

This issue has been triaged and we’re looking into it. Please keep comments to trying to resolve the issue as you’re pinging everyone on the thread. If you’re running into it use the 👍 emoji reaction on the initial post.

Hi, yes this should be corrected in the next release, we will update here when it is available!

I’ve found out that in my case the error was caused by next/head component in a page.tsx file. When I removed it, the build succeeded.

Hi this should be updated in v13.0.2 please update and give it a try!

Haven’t had an issue with this since the update. Thank you so much.

Windows 11, and can reproduce this constantly. The page does use ‘use client’ and imports useEffect, useRef and useState.

Right now I can only debug and see changes by restarting npm run dev after every page load. If I try to load the page twice without a restart it throws this error.

The issue seems not resolved on 13.0.3:

 Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 18.4.0
      npm: 9.1.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.3
      eslint-config-next: 13.0.3
      react: 18.2.0
      react-dom: 18.2.0
TypeError: Cannot read properties of undefined (reading '')
    at resolveModuleReference (/Users/alextarana/Documents/Projects/mflix/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:46:58)
    at resolveModule (/Users/alextarana/Documents/Projects/mflix/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:646:25)
    at processFullRow (/Users/alextarana/Documents/Projects/mflix/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:735:9)
    at processBinaryChunk (/Users/alextarana/Documents/Projects/mflix/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:789:5)
    at progress (/Users/alextarana/Documents/Projects/mflix/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:842:5)

I have the same issue with 2 client component pages. Even when I change the page manually in the address bar, the same error occurs, mainly when trying to open the page second time.

I’ve found a workaround to continue my testing of Next.js 13. If I run dev with turbopack (next dev --turbopack), the error goes away. But it breaks client-side navigation with <Link> for unknown reason (it works like just <a>, doing a full page reload). Update: data fetching in client component pages breaks client-side navigation. If no data fetching is present, navigation by using turbopack works fine.

Can confirm so far W10 running next 13.0.2 I don’t see this error!

We talked about this issue in Next.js’ Discord in the general chat. Seems like it works on Ubuntu using WSL2 🤔

image

Rather interestingly, --turbo also seems to remove the errors for me in dev mode too.

They remain when trying to do next build though.

Same things happens to me but all pages are on client. Also my links don’t work i have to change page manually. I have no clue what this can be.

This is indeed OS related. The same codebase is working fine when using WSL, but on Windows does throw up this error consistently.

Not sure if its related, on WSL get below warnings that are not shown on Windows. would below warning indirectly be preventing the error from occurring?

info  - Using wasm build of next-swc
warn  - Attempted to load @next/swc-linux-x64-gnu, but it was not installed
warn  - Attempted to load @next/swc-linux-x64-gnux32, but it was not installed
warn  - Attempted to load @next/swc-linux-x64-musl, but it was not installed

I still get below on server console in WSL but its not affecting UI currently

TypeError: Cannot read properties of undefined (reading 'call')
    at options.factory (http://localhost:3000/_next/static/chunks/webpack.js:722:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js:37:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js:377:21)
    at eval (webpack-internal:///./components/Shimmer.tsx:6:85)

Thought it was just me/my project! Would love a resolution for this, as it basically breaks local development for me.

I get the same problem on MacOS so it’s not a Windows-specific problem.

log

yarn build
yarn run v1.22.18
warning ../../../package.json: No license field
$ next build
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build  
info  - Compiled successfully
info  - Linting and checking validity of types  
info  - Collecting page data  
[    ] info  - Generating static pages (0/3)TypeError: Cannot read properties of undefined (reading '')
    at m (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:917:81)
    at Q (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:927:80)
    at S (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:928:317)
    at c (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:930:310)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading '')
    at m (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:917:81)
    at Q (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:927:80)
    at S (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:928:317)
    at c (/Users/typeofweb/htdocs/saleor/test-13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:930:310)

next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.10.0
      npm: 8.19.2
      Yarn: 1.22.18
      pnpm: 7.14.0
    Relevant packages:
      next: 13.0.1-canary.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

I tried using --turbo but encountered a problem with @next/font/google so be mindful of that. #41841 (comment)

Windows subsystem linux or a dev machine (I use macOS now to run the dev environment and just remote in using VSCode) is the better solution OR turbo if you’re NOT using @next/font/google for now.

📝 Apparently not compatible with Tailwind yet neither

I tried using --turbo but encountered a problem with @next/font/google so be mindful of that. https://github.com/vercel/next.js/issues/41841#issuecomment-1296379293

Windows subsystem linux or a dev machine (I use macOS now to run the dev environment and just remote in using VSCode) is the better solution OR turbo if you’re NOT using @next/font/google for now.

I’ve found out that in my case the error was caused by next/head component in a page.tsx file. When I removed it, the build succeeded.

https://github.com/moodiest/nextjs13-client-server-error-reproduction has no next/head import, so it’s not the problem.