Navigating between server component + client component page throws error - Cannot read properties of undefined (reading '') #41806

james-elicx · 2022-10-25T21:43:25Z

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:

Run the Next.js app in development mode.
Visit root server component page, i.e. /
Visit client component page, i.e. /client-page
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

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

The text was updated successfully, but these errors were encountered:

yura3d · 2022-10-26T10:34:29Z

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.

VincentGillot · 2022-10-26T11:25:29Z

I started a project from scratch with npx create next and the error appear either if the index page renders some "use client" or if 2 other pages have "use client". It does not fail if one subpage has "use client".

So basically;

index page with use client = fail
2+ subpages with use client = fail
1 subpage with use client = good

This is tested with all default files in the app/ folder and the pages are loading components from a components folder that has the use clients set.

VincentGillot · 2022-10-26T11:26:16Z

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.

I can confirm --turbo removes the problem in my test case

james-elicx · 2022-10-26T11:46:10Z

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

They remain when trying to do next build though.

yura3d · 2022-10-26T13:32:58Z

They remain when trying to do next build though.

This is expected behavior since turbopack is used only in dev. So the issue is actual.

muradbu · 2022-10-26T14:08:22Z

I started a project from scratch with pnpm create next-app --ts --example with-turbo, this example uses the new client component format ('use client';.) And without making changes ran pnpm run build and it succeeded without errors. Following with pnpm run start, the app gets served. Haven't tried deploying to Vercel yet though.

muradbu · 2022-10-26T14:11:11Z

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

plastic041 · 2022-10-27T02:22:13Z

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

Maybe OS problem?

I can build example project(https://github.com/moodiest/nextjs13-client-server-error-reproduction) on m1 macbook air, but it fails on windows 10.

build message on mac, success

build message on windows 10, error

message

> 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/6)TypeError: Cannot read properties of undefined (reading 'ClientComponent')
    at Oa (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1014:56)
    at Ia (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1127:50)
    at Array.toJSON (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:904:32)
    at stringify (<anonymous>)
    at S (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1202:51)
    at Object.start (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1313:53)
    at g (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:102:35)
    at Object.start (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:1708:29)
    at Oe.n2 (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:770:39)
    at D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:776:385
TypeError: Cannot read properties of undefined (reading 'default')
    at Oa (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1014:56)
    at Ia (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1127:50)
    at Array.toJSON (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:904:32)
    at stringify (<anonymous>)
    at S (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1202:51)
    at Object.start (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1313:53)
    at g (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:102:35)
    at Object.start (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:1708:29)
    at Oe.n2 (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:770:39)
    at D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:776:385
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '3120548961'
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '2368376545'
}

Error occurred prerendering page "/client-page". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'default')
    at Oa (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1014:56)
    at Ia (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1127:50)
    at Array.toJSON (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:904:32)
    at stringify (<anonymous>)
    at S (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1202:51)
    at Object.start (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1313:53)
    at g (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:102:35)
    at Object.start (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:1708:29)
    at Oe.n2 (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:770:39)
    at D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:776:385

Error occurred prerendering page "/server-page-with-client". Read more: https://nextjs.org/docs/messages/prerender-errorTypeError: Cannot read properties of undefined (reading 'ClientComponent')
    at Oa (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1014:56)
    at Ia (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1127:50)
    at Array.toJSON (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:904:32)
    at stringify (<anonymous>)
    at S (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1202:51)
    at Object.start (D:\nextjs13-client-server-error-reproduction\.next\server\chunks\235.js:1313:53)
    at g (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:102:35)
    at Object.start (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:1708:29)
    at Oe.n2 (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:770:39)
    at D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\compiled\@edge-runtime\primitives\streams.js:776:385
info  - Generating static pages (6/6)

> Build error occurred
Error: Export encountered errors on following paths:
        /client-page/page: /client-page
        /server-page-with-client/page: /server-page-with-client
    at D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\export\index.js:405:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\trace\trace.js:79:20)
    at async D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\build\index.js:1263:21
    at async Span.traceAsyncFn (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\trace\trace.js:79:20)
    at async D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\build\index.js:1123:17
    at async Span.traceAsyncFn (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\trace\trace.js:79:20)
    at async Object.build [as default] (D:\nextjs13-client-server-error-reproduction\node_modules\next\dist\build\index.js:64:29)

Can anyone test on different machines?

james-elicx · 2022-10-27T07:38:50Z

Maybe OS problem?

It's certainly seeming that way. My build on windows 10 failed completely but succeeded when I used Ubuntu through WSL2.

What I did find interesting though was that this appears to be a problem with webpack and Next.js 13, because using --turbo when running next dev --turbo works as expected, but when you remove the --turbo it starts to throw errors on page changes in development mode. Those errors are the same as the ones present when running build.

I imagine that when Turbopack supports building, this won't necessarily be as much of a problem, unless of course someone needs to be able to use webpack.

everdrone · 2022-10-27T08:42:54Z

I'm also getting an error on Windows 10 but only when navigating https://github.com/vercel/app-playground
Builds and runs on WSL2 Debian but it's extremely slow

wait  - compiling /page (client and server)...
event - compiled client and server successfully in 9.4s (393 modules)
wait  - compiling...
event - compiled successfully in 392 ms (219 modules)
wait  - compiling /route-groups/(main)/page (client and server)...
wait  - compiling /layouts/page (client and server)...
wait  - compiling /loading/page (client and server)...
wait  - compiling /streaming/page (client and server)...
wait  - compiling /error-handling/page (client and server)...
wait  - compiling /ssg/page (client and server)...
event - compiled client and server successfully in 1140 ms (457 modules)
...

typeofweb · 2022-10-27T09:23:24Z

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

typeofweb · 2022-10-27T09:36:21Z

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.

plastic041 · 2022-10-27T09:44:05Z

@mmiszy What happens when you run yarn build on https://github.com/moodiest/nextjs13-client-server-error-reproduction ?

plastic041 · 2022-10-27T09:52:57Z

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.

TheCodby · 2022-10-27T11:41:34Z

I have the same problem but different error

TypeError: Cannot read properties of undefined (reading 'default')
    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)

TheCodby · 2022-10-27T20:13:13Z

also when I build the project I get this

TypeError: Cannot read properties of undefined (reading 'default')
    at Oa (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2327:56)
    at Ia (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2440:50)
    at Array.toJSON (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2217:32)
    at stringify (<anonymous>)
    at S (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2515:51)
    at Object.start (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2626:53)
    at setupReadableByteStreamController (node:internal/webstreams/readablestream:3110:23)
    at setupReadableByteStreamControllerFromSource (node:internal/webstreams/readablestream:3147:3)
    at new ReadableStream (node:internal/webstreams/readablestream:245:7)
    at exports.renderToReadableStream (C:\Ahmed\programming\apps\OurPlaces\ourplaces-beta\.next\server\chunks\418.js:2623:24)
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '3366335327'
}

TheCodby · 2022-10-28T00:17:43Z

I noticed when converted all client components and pages to server components (by deleting "use client") everything will work properly

amarjeet987 · 2022-10-28T04:40:53Z

Ran into the same error while trying to run the Next13 Playground Demo App

Probably a hacky solution but got the app running as expected by doing the following :

Change dev script to npm run dev --turbo
It won't load the css since turbo doesn't support tailwindcss right away, more about it here.
Created a file styles/main.css
In app/layout.tsx, change the import '@/styles/global.css' to import '@/styles/main.css'
Updated the dev script to concurrently \"next dev --turbo\" " \"tailwindcss --input styles/globals.css --output styles/main.css --watch\ and installed the required packages.
npm run dev and it ran perfectly.

james-elicx · 2022-10-28T07:10:08Z

Ran into the same error while trying to run the Next13 Playground Demo App

Probably a hacky solution but got the app running as expected by doing the following :

Change dev script to npm run dev --turbo

It won't load the css since turbo doesn't support tailwindcss right away, more about it here.

Created a file styles/main.css

In app/layout.tsx, change the import '@/styles/global.css' to import '@/styles/main.css'

Updated the dev script to concurrently \"next dev --turbo\" " \"tailwindcss --input styles/globals.css --output styles/main.css --watch\ and installed the required packages.

npm run dev and it ran perfectly.

Yeah, I believe it is a webpack problem as using turbopack seems to function as expected. If you try building, you will most likely get the error again as the only option for building is webpack at the moment.

Would you be able to confirm which OS you are using?

amarjeet987 · 2022-10-28T07:20:07Z

Ran into the same error while trying to run the Next13 Playground Demo App
Probably a hacky solution but got the app running as expected by doing the following :

Change dev script to npm run dev --turbo

It won't load the css since turbo doesn't support tailwindcss right away, more about it here.

Created a file styles/main.css

In app/layout.tsx, change the import '@/styles/global.css' to import '@/styles/main.css'

Updated the dev script to concurrently \"next dev --turbo\" " \"tailwindcss --input styles/globals.css --output styles/main.css --watch\ and installed the required packages.

npm run dev and it ran perfectly.

Yeah, I believe it is a webpack problem as using turbopack seems to function as expected. If you try building, you will most likely get the error again as the only option for building is webpack at the moment.

Would you be able to confirm which OS you are using?

For this, windows 11

paviln · 2022-10-29T00:39:31Z

Get the same error. In my case I try to use a client component inside a server component, which results in this error. This should be possible right? Server component inside server component works fine, but i need a client component to use event handlers and hooks.

schemburkar · 2022-10-31T16:46:46Z

At first thought its below

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.

This actually seemed to be the problem for me, using next/head causes build issues. The documentation currently uses the standard ... in their code snippets so I assume this is a known issue?

but then the issue reoccurred after a while, so next/head seems unrelated or not the only culprit

huaiyukhaw · 2022-10-31T17:28:53Z

I ran in to the same issue. Build on Windows 11 failed completely. Failed occasionally in development mode too.

Build successfully on WSL 2, but very slow in development mode.

james-elicx · 2022-10-31T23:49:03Z

Can confirm I am also running into this issue on Windows 10. There have been no confirmed fixes or genuine work arounds right? It's pretty breaking, preventing me from building anything using client components

The only workarounds for Windows users appear to be using --turbo for dev mode or using a Linux distribution through something like WSL.

chukwumaokere · 2022-10-31T23:58:45Z

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.

timneutkens · 2022-11-01T11:26:46Z

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.

schemburkar · 2022-11-01T15:31:07Z

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)

Jbmanllr · 2022-11-02T21:59:11Z

This workaround works, but hitting error with turbopack: i just erased the svg though.

Error resolving URI imports: not implemented yet
[0] unable to resolve uri "data:" "image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"

simPod · 2022-11-02T22:22:01Z

@schemburkar I encountered the issue on macos (ventura) as well

cmhhelgeson · 2022-11-02T23:08:47Z

I also experienced a similar issue on Windows 10 when trying to use the useState hook in a client component embedded in a server component. I received the same TypeError as @james-elicx, but all I had to do to fix the issue was give my useState hooks different default values.

/* Non-functioning code */
const [title, setTitle] = useState<string>('')
const [date, setDate] = useState<string>('')

/*Functioning Code*/
const [title, setTitle] = useState<string>('Title')
const [date, setDate] = useState<string>('01-01-2022')

UPDATE: This doesn't seem to work as consistently as I thought, as in some instances, the error still persists.

UPDATE 2: I'm running 'next run dev --turbo' in VS Code's Javascript Debug Terminal using the configuration specified here: https://nextjs.org/docs/advanced-features/debugging. Under these constraints the error is also not appearing, irrespective of the value I use to initialize the state variables.

UPDATE 3: Migrating to a later version of yarn, (I was still using v1) also (somehow) resolved the issue for me. I'm not sure how much these solutions will resolve problems across larger apps, but that's what worked for me.

BWBama85 · 2022-11-02T23:44:53Z

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.

mariusfriess · 2022-11-03T18:02:42Z

May this be related to #42024 an therefore possibly fixed by #42421 ?

ijjk · 2022-11-03T18:23:29Z

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

ijjk · 2022-11-04T00:50:01Z

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

BWBama85 · 2022-11-04T01:03:51Z

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

chukwumaokere · 2022-11-04T16:53:39Z

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

hckhanh · 2022-11-17T08:39:11Z

@chukwumaokere How about 13.0.3? Did you try it?

alextarana · 2022-11-17T10:00:14Z

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)

timneutkens · 2022-11-21T13:55:14Z

The issue seems not resolved on 13.0.3:

This issue that was reported was specifically related to Windows only, can you create a new issue with a reproduction? I'm guessing you're using next/head somewhere? There's another issue open for that already if so.

github-actions · 2022-12-22T00:03:41Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

james-elicx added the bug Issue was opened via the bug report template. label Oct 25, 2022

This comment was marked as off-topic.

Sign in to view

james-elicx changed the title ~~Switching between server component page and client component page throws error~~ [Windows] Navigating between server component + client component page throws error - Cannot read properties of undefined (reading '') Oct 27, 2022

TheCodby mentioned this issue Oct 27, 2022

Bug in rendering "TypeError: Cannot read properties of undefined (reading 'default')" #41963

Closed

balazsorban44 added type: needs investigation area: app App directory (appDir: true) labels Oct 27, 2022

james-elicx mentioned this issue Oct 28, 2022

Next13: Cannot read properties of undefined (reading '') #42033

Closed

1 task

james-elicx mentioned this issue Oct 28, 2022

getServerSideProps() example does not work. cloudflare/next-on-pages#10

Closed

This comment was marked as off-topic.

Sign in to view

timneutkens self-assigned this Nov 1, 2022

This comment was marked as off-topic.

Sign in to view

ijjk mentioned this issue Nov 3, 2022

Server will error on all page requests after a couple navigations #42381

Closed

1 task

plastic041 mentioned this issue Nov 3, 2022

fetch() gets revalidates, ignoring cache settings. Next.js 13 #41977

Closed

1 task

ijjk closed this as completed Nov 4, 2022

balazsorban44 mentioned this issue Nov 16, 2022

Cannot read properties of undefined (reading '') #42983

Closed

1 task

github-actions bot locked as resolved and limited conversation to collaborators Dec 22, 2022

Navigating between server component + client component page throws error - Cannot read properties of undefined (reading '') #41806

Navigating between server component + client component page throws error - Cannot read properties of undefined (reading '') #41806

Comments

james-elicx commented Oct 25, 2022 • edited

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

This comment was marked as off-topic.

yura3d commented Oct 26, 2022 • edited

VincentGillot commented Oct 26, 2022

VincentGillot commented Oct 26, 2022

james-elicx commented Oct 26, 2022 • edited

yura3d commented Oct 26, 2022

muradbu commented Oct 26, 2022

muradbu commented Oct 26, 2022

plastic041 commented Oct 27, 2022 • edited

build message on mac, success

build message on windows 10, error

james-elicx commented Oct 27, 2022

everdrone commented Oct 27, 2022 • edited

typeofweb commented Oct 27, 2022

log

next info

typeofweb commented Oct 27, 2022

plastic041 commented Oct 27, 2022

plastic041 commented Oct 27, 2022

TheCodby commented Oct 27, 2022

TheCodby commented Oct 27, 2022

TheCodby commented Oct 28, 2022

amarjeet987 commented Oct 28, 2022 • edited

james-elicx commented Oct 28, 2022

amarjeet987 commented Oct 28, 2022 • edited

paviln commented Oct 29, 2022

This comment was marked as off-topic.

schemburkar commented Oct 31, 2022

huaiyukhaw commented Oct 31, 2022

This comment was marked as off-topic.

james-elicx commented Oct 31, 2022

chukwumaokere commented Oct 31, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

timneutkens commented Nov 1, 2022

schemburkar commented Nov 1, 2022 • edited

Jbmanllr commented Nov 2, 2022

simPod commented Nov 2, 2022

cmhhelgeson commented Nov 2, 2022 • edited

BWBama85 commented Nov 2, 2022

mariusfriess commented Nov 3, 2022

ijjk commented Nov 3, 2022

ijjk commented Nov 4, 2022

BWBama85 commented Nov 4, 2022

chukwumaokere commented Nov 4, 2022

hckhanh commented Nov 17, 2022 • edited

alextarana commented Nov 17, 2022

timneutkens commented Nov 21, 2022

github-actions bot commented Dec 22, 2022

james-elicx commented Oct 25, 2022 •

edited

yura3d commented Oct 26, 2022 •

edited

james-elicx commented Oct 26, 2022 •

edited

plastic041 commented Oct 27, 2022 •

edited

everdrone commented Oct 27, 2022 •

edited

`next info`

amarjeet987 commented Oct 28, 2022 •

edited

amarjeet987 commented Oct 28, 2022 •

edited

schemburkar commented Nov 1, 2022 •

edited

cmhhelgeson commented Nov 2, 2022 •

edited

hckhanh commented Nov 17, 2022 •

edited