search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.69k stars 26.62k forks source link

error TypeError: Cannot read properties of undefined (reading '') when using Next.js runtime edge on turborepo or Nx #53562

Open NastykSwED opened 1 year ago

NastykSwED commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro   
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.13   
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/NastykSwED/turbo-next-edge

To Reproduce

  1. Run pnpm install to install the dependencies.
  2. Run pnpm dev to get both projects up or run pnpm dev --filter [docs | web].
  3. Go to http://localhost:3001/ or http://localhost:3000/ and see the console for the following error: Screenshot_1

And in the browser: Screenshot_2

Describe the Bug

When using the runtime edge on a monorepo such as turborepo or Nx, the console throws the error: "- error TypeError: Cannot read properties of undefined (reading '')". This only happens with monorepos, when using standalone applications this does not happen.

Expected Behavior

It should not throw the above error when using a Nextjs app with the runtime edge on a monorepo.

Which browser are you using? (if relevant)

Microsoft Edge Versión 115.0.1901.188 (Compilación oficial) (64 bits)

How are you deploying your application? (if relevant)

No response

NEXT-1513

e-roy commented 1 year ago

I've experienced this same issue, rolled back to version next 13.4.10 helped resolve for me for the time being.

balazsorban44 commented 1 year ago

@e-roy are you also on Windows? Is this only happening to you too with export const runtime = "edge" Could you link to your code/own reproduction? :pray:

I'm trying to reproduce this, but so far unable to. I wonder if it might be OS related.

@NastykSwED, @e-roy could you also try to pinpoint which exact canary version shows this for you? That way, we could track down the exact PR if it's a regression.

e-roy commented 1 year ago

@e-roy are you also on Windows? Is this only happening to you too with export const runtime = "edge" Could you link to your code/own reproduction? 🙏

I'm trying to reproduce this, but so far unable to. I wonder if it might be OS related.

@NastykSwED, @e-roy could you also try to pinpoint which exact canary version shows this for you? That way, we could track down the exact PR if it's a regression.

This one was really odd, I'm also a Windows machine. This was on a private repo. I tried to replicate the error and couldn't do it.

My setup was a monorepo using yarn workspaces, with one app a next app and the other a react app using rollup. I was not using edge runtimes anywhere. I got the error if I tried updating next to versions 13.4.11, 13.4.12, or 13.4.13

I ended up killing the monorepo setup that was a package.json and yarn.lock files in the root and separated out yarn.lock files for each app's folder, removing all node_module folders and reinstalling packages. Once I did this, all my problems went away and I could use next v 13.4.13

I think the error might have been around a mismatch with a typescript package.

I'm sorry @balazsorban44, I wish I could be more helpful in tracking this error.

NastykSwED commented 1 year ago

Hi @balazsorban44, If it is possible that these problems are related to the OS, I have opened another issue some time ago: #52176 in which several people have commented the same thing. It seems to only affect Windows OS. In a while, I will try with a Linux distro and see if it happens, although it has already been commented in the other issue that it works. I have also been testing with different versions of Next.js and the last one I tried and got the same error was 13.2.0.

AlexMartosP commented 11 months ago

Same problem here! Running on Windows 11 and using pnpm workspaces. The problem only occurs with export const runtime = "edge". No problem without monorepo. Tried 13.4.10 and got same problem!

image

413n commented 10 months ago

I ran in the same issue using Turborepo and "Edge" runtime on Windows. I tried running the same project on a Macbook and it worked fine.

RhysSullivan commented 10 months ago

I'm also encountering this problem, using PNPM, turborepo, and NextJS 14 on Windows

TomaszPietrzykowski commented 10 months ago

The same issue with Nx and NextJS 14, Win 11.

desiboli commented 9 months ago

I get this error "Cannot read properties of undefined (reading 'call')" on a Turborepo project with Next.js ^14.0.2, PNPM on a MAC.

christophmeise commented 9 months ago

I get the same error using Windows 11, Next.js v14.0.3 with turborepo and pnpm.

The issue only happens with runtime=edge and only on Windows OS. The same code runs fine locally on my Mac and deployed on Vercel.

mees-van-wel commented 9 months ago

Same here with Windows 11 and Next.js v14.0.3, I have export const runtime = "edge"; at the top of my src/app/layout.tsx to make the whole app run on the edge runtime but it gives me the following error:

 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
    at resolveClientReference (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:53:55)
    at resolveModule (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1588:35)
    at processFullRow (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1648:25)
    at processBinaryChunk (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1751:21)
    at progress (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1819:17)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processTimers (node:internal/timers:511:9)
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]
k-lofnes commented 9 months ago

Same issue here aswell on Windows 11 and Next.js v14.0.3. Downgraded to 14.0.2 and it works as normal for me.

zeestack commented 9 months ago

same issue here

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

simon-v-swyftx commented 9 months ago

Downgraded to 14.0.2 and it works as normal for me.

Hmm that didn't work for me.

I'm getting the exact same stacktrace as @mees-van-wel Using nodejs runtime does make it run, but of course defeats the purpose of edge.

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro  <-- note that 'next info' had printed out windows 10 pro
Binaries:
  Node: 18.18.2
  npm: N/A
  Yarn: N/A
  pnpm: 8.11.0
Relevant Packages:
  next: 14.0.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
josetr commented 8 months ago

Same here with Windows 11 and Next.js v14.0.3, I have export const runtime = "edge"; at the top of my src/app/layout.tsx to make the whole app run on the edge runtime but it gives me the following error:

 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
    at resolveClientReference (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:53:55)
    at resolveModule (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1588:35)
    at processFullRow (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1648:25)
    at processBinaryChunk (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1751:21)
    at progress (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1819:17)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processTimers (node:internal/timers:511:9)
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

I have the same setup, and also the same issue.

Here's more context that could be useful:

https://github.com/vercel/next.js/blob/eb6aae640f140c40f53503247007e179f6f7ba12/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js#L63

moduleExports is undefined here. The first time it happens is because (app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js doesn't exist in the bundlerConfig object.

Windows 11: issue happens on development, but works while building (production) WSL: works fine in both cases

Temp workaround: export const runtime = process.env.NODE_ENV === "development" ? "nodejs" : "experimental-edge"

VaniaPopovic commented 8 months ago

Same here with Windows 11 and Next.js v14.0.3, I have export const runtime = "edge"; at the top of my src/app/layout.tsx to make the whole app run on the edge runtime but it gives me the following error:

 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
    at resolveClientReference (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:53:55)
    at resolveModule (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1588:35)
    at processFullRow (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1648:25)
    at processBinaryChunk (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1751:21)
    at progress (../../node_modules/.pnpm/next@14.0.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1819:17)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processTimers (node:internal/timers:511:9)
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

I have the same setup, and also the same issue.

Here's more context that could be useful:

https://github.com/vercel/next.js/blob/eb6aae640f140c40f53503247007e179f6f7ba12/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js#L63

moduleExports is undefined here. The first time it happens is because (app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js doesn't exist in the bundlerConfig object.

Windows 11: issue happens on development, but works while building (production) WSL: works fine in both cases

Temp workaround: export const runtime = process.env.NODE_ENV === "development" ? "nodejs" : "experimental-edge"

This causes the deployment to vercel to fallback to lambda functions instead of edge. Is there anything blocking this piece of work? Anything we can do to help? Been experiencing this issue for months now, and my main working machine is my windows.

VaniaPopovic commented 7 months ago

Here is a link to a new reproduction as the one on the initial post is returning a 404: https://github.com/VaniaPopovic/turborepo-repro

christophmeise commented 6 months ago

Now https://github.com/vercel/next.js/issues/52176 has been closed. @balazsorban44

But this issue is still the same. I just tested it again on 14.1.1-canary.77 on Windows 11 with turborepo. Runtime edge is not working in development.

---> TypeError: Cannot read properties of undefined (reading 'default') ---> at resolveClientReference (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:87:55)

I tested the exact same setup with WSL and it worked. There is a Windows-specific error that is not resolved, yet.

k-lofnes commented 6 months ago

Same here now, updated to 14.1.1 and same error as @christophmeise . This i only happening on windows, macOS running fine. But the most confusing part is that canary version tend to work, but have never got latest running without that error.

Martoxdlol commented 5 months ago

Same issue here

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

christophmeise commented 5 months ago

To raise awareness again, this issue is still highly relevant for us and was not fixed, yet. It is still happening with the latest version (14.2.0-canary.54).

Maybe you have a short moment to look at it again @balazsorban44? We have a reproduction repo, detailled error logs in here - is anything else needed?

I finally want to get rid of this issue from my bookmarks bar after 9 months :)

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

felipeorlando commented 4 months ago

Same error here.

polvallverdu commented 3 months ago

Any news?

Happening with https://github.com/t3-oss/create-t3-turbo when keeping runtime at edge. I'm on Windows 11.

docimin commented 1 month ago

@balazsorban44 Any news? Still waiting using Next.js 14.2.5

docimin commented 1 month ago

Okay I got it fixed. Seems like every app requires the dev script to be: "dev": "next dev --turbo" instead of "dev": "next dev"