search

vercel / next.js

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

[NEXT-1231] This is probably a bug in the React Server Components bundler. #50243

Closed codeawy closed 1 year ago

codeawy 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.3
      eslint-config-next: 13.4.3
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

warn  - Latest canary version not detected, detected: "13.4.3", newest: "13.4.4-canary.6".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

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

No response

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

npx create-next-app --example reproduction-template-app-dir reproduction-app

To Reproduce

When attempting to generate a new Next.js project using the command npx create-next-app@latest, I encountered an error in app-router.js# related to the React Client Manifest. This error is likely due to a bug in the React Server Components bundler, which was triggered after running the npm run dev command.

image

Describe the Bug

image

Expected Behavior

Generate a new Next.js app with the latest features

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-1231

hiramhuang commented 1 year ago

Same issue here. I'm running on next@13.4.2, and this error only occur on production build.

codeawy commented 1 year ago

I tried to generate a new project now, and this working fine ❤️

leimonio commented 1 year ago

I'm facing a similar issue running NextJS application through a custom http server, using the next module v13.4.4 The module itself exists in the given path, but there is also a hash appended. 

Uncaught Error: Could not find the module "{absolutePathToFolder}/bit-next-app-type/node_modules/.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/image.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at resolveClientReferenceMetadata (webpack-internal:///(sc_server)/../../../../../.pnpm/next@13.4.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js:205:27)
leimonio commented 1 year ago

@shuding After a bit further debugging of this it seems like webpackMap here only includes references from inside components folder but nothing related to the client/image.js. Is this an expected behavior?

https://github.com/vercel/next.js/blob/2226d2935f04e10de0a5d563067e7d32e6872f00/packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js#LL2948C10-L2948C32

Abhishek-Selfridges commented 1 year ago

I am still getting the same error when trying to execute npm run dev . I am trying to create a new next js project using npx create-next-app . I tried with both the @latest and without latest and for both it gives same error in sonsole as Could not find the module app-router.js in the React Client Manifest. This is probably a bug in the React Server Components bundler.

@shuding @codeawy

leimonio commented 1 year ago

@Abhishek-Selfridges can you please raise a new issue? my setup is a bit more complicated to share at the moment, so I think the team would really appreciate it if they have more detailed information about how to reproduce this issue.

simrin3308 commented 1 year ago

Faced the same error today. Any fix?

shawnesquivel commented 1 year ago

Any fix for this? Finding that some people can run npm install on my project, but when they run npm run dev they get this error.

desca96aws commented 1 year ago

image

I get the same issue in the browser, this is what I get in the terminal

gharis94 commented 1 year ago

I am having the same issue, did anyone resolve it? if yes then please share.

darasus commented 1 year ago

I'm getting similar issue only when running route on edge.

Error: Could not find the module "/vercel/path0/apps/web/src/components/Marketing/GetStartedButton.tsx#GetStartedButton" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:35:327)
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:40:79)
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:29:150)
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:50:197)
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:45:449)
    at (../../node_modules/.pnpm/next@13.4.8-canary.14_@babel+core@7.22.5_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack-experimental/cjs/react-server-dom-webpack-server.edge.production.min.js:33:406)
stevedeighton commented 1 year ago

I'm seeing this error when using the Image component. I'm on next@13.4.8 which was released just a few hours ago. Everything is working as expected until I use the Image component. I get this error...

Error: Could not find the module "MY_PROJECT_PATH/node_modules/next/dist/client/image-component.js#Image" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

I also see this in the terminal...

error node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (188:12) @ resolveClientReferenceMetadata.

Maybe this issue can be reopened please?

eliasbauer1 commented 1 year ago

Solved the problem

Solve: I added "use client" in the parent component. Explanation: I rendered the child component dynamically, so if I tried to use useEffect on the child component, it didn't work. For it to not get rendered on the server (and throw the error) I added "use client".

alexkirsz commented 1 year ago

I think this is about as small a repro as I can make it. The issue seems to stem from using a dynamic import. I've personally encountered this while loading MDX components, but this can occur with any kind of component.

Repro: https://github.com/alexkirsz/next-app-router-dynamic-issue

stevedeighton commented 1 year ago

alexkirsz/next-app-router-dynamic-issue

Yes good call. My project is using dynamic imports too!

stevedeighton commented 1 year ago

@alexkirsz Looks like this issue isn't isolated to the Image component, as I'm getting the same error when using the link component in a component that's dynamically imported.

Error: Could not find the module "/MY_PROJECT_PATH/node_modules/next/dist/client/link.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

gokulkrishh commented 1 year ago

@stevedeighton I am having similar issue but for different file. Still trying to figure out what it it.

Error: Could not find the module "/vercel/path0/node_modules/next/dist/client/components/error-boundary.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
    at gb (/var/task/.next/server/chunks/2578.js:7033:27)
    at Ya (/var/task/.next/server/chunks/2578.js:7107:38)
    at Object.toJSON (/var/task/.next/server/chunks/2578.js:6871:20)
    at stringify (<anonymous>)
    at ib (/var/task/.next/server/chunks/2578.js:7278:9)
    at fb (/var/task/.next/server/chunks/2578.js:7177:29)
    at Timeout._onTimeout (/var/task/.next/server/chunks/2578.js:7002:16)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
[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: '1623416432'
}
gokulkrishh commented 1 year ago

Found out that error.tsx file for error handling was missing. Even though there was no error in development but got the above issue in production.

ctkc commented 1 year ago

@gokulkrishh I had the same error. In my case I was implementing global-error.tsx and I was getting this issue during the productive build, I removed it and it's working properly now

gokulkrishh commented 1 year ago

@ctkc Yes looks like it, global-error.tsx file caused this issue. Resolved it by removing it. Thanks.

stevedeighton commented 1 year ago

I have also spotted this error using useState. It appears anything that's client side isn't working with dynamic imports, unless I'm doing something totally wrong. I have tried adding use client to all of my components but it's still not playing nice. I'll be reverting to the pages router for now :(

louisthomaspro commented 1 year ago

This error is so weird.. I had it for a moment. I switched branch, then came back to the my main branch. And the error disappeared. My error log was:

Error: Could not find the module "/home/git/project/components/side-sheet-wrapper.tsx#SideSheetWrapper" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
keno-reloaded commented 1 year ago

Getting the following error:

Error: Could not find the module "/Users/[user]/Projects/ProjectName/components/Modal.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

NextJs version: "next": "^13.4.10",

Node version: v18.16.0

I'm using the Intercepting Routes feature.

It was working yesterday, I updated NextJs today, and it is not working anymore.

askinbilir commented 1 year ago

Getting the following error:

Error: Could not find the module "/Users/[user]/Projects/ProjectName/components/Modal.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

NextJs version: "next": "^13.4.10",

Node version: v18.16.0

I'm using the Intercepting Routes feature.

It was working yesterday, I updated NextJs today, and it is not working anymore.

  • app

    • layout.tsx (modal is added in the layout)

    • page.tsx

    • project/[id]

    • page.tsx

    • @modal

    • (.)project/[id]

      • page.tsx

Things I've tried so far without success:

  • Delete .next folder
  • Delete node_modules folder
  • Delete package-lock.json
  • npm cache clean --force
  • npm install

I faced with same issue, I don't know the problem, but I guess client components cause the crash when I remove them it's working so if you convert all components to server components, probably will work.

IamSolaSholzy01 commented 1 year ago

Getting the following error:

Error: Could not find the module "/Users/[user]/Projects/ProjectName/components/Modal.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

NextJs version: "next": "^13.4.10",

Node version: v18.16.0

I'm using the Intercepting Routes feature.

It was working yesterday, I updated NextJs today, and it is not working anymore.

  • app

    • layout.tsx (modal is added in the layout)

    • page.tsx

    • project/[id]

    • page.tsx

    • @modal

    • (.)project/[id]

      • page.tsx

Things I've tried so far without success:

  • Delete .next folder
  • Delete node_modules folder
  • Delete package-lock.json
  • npm cache clean --force
  • npm install

I'm now facing the same issue after upgrading from Next 13.4.7 to 13.4.10. V13.4.8 had a different issue, that caused a client exception.

monzim commented 1 year ago

Same issue NextJs version: "next": "13.4.10", React: "react": "18.2.0",

`@modal

(.)project/[id]

page.tsx`

piedrahitapablo commented 1 year ago

Getting the following error:

Error: Could not find the module "/Users/[user]/Projects/ProjectName/components/Modal.tsx#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

NextJs version: "next": "^13.4.10",

Node version: v18.16.0

I'm using the Intercepting Routes feature.

It was working yesterday, I updated NextJs today, and it is not working anymore.

  • app

    • layout.tsx (modal is added in the layout)

    • page.tsx

    • project/[id]

    • page.tsx

    • @modal

    • (.)project/[id]

      • page.tsx

Things I've tried so far without success:

  • Delete .next folder
  • Delete node_modules folder
  • Delete package-lock.json
  • npm cache clean --force
  • npm install

I was facing the same issue, downgrading to 13.4.7 fixed the problem. The nextgram example is using that version.

acomanescu commented 1 year ago

Same issue when upgrading from 13.4.9 to 13.4.10.

piedrahitapablo commented 1 year ago

I think this is related to #52681

pawanrana1992 commented 1 year ago

Guys please remove global-error.tsx it is the culprit here. I tried many things but this issue with error handling from nextjs side. Nextjs team should look into it on priority. version: "next": "13.4.10", (app-directory)

timneutkens commented 1 year ago

@pawanrana1992 can you share a reproduction of your application where it fails in a new issue? Might be something in the file? I.e. maybe not rendering <html> etc.?

dihan48 commented 1 year ago

@timneutkens https://stackblitz.com/github/easydevgit/next-13-course/tree/master/advanced-routing-intercepting-routes

timneutkens commented 1 year ago

Please open a new issue as I requested.

julioflima commented 1 year ago

@timneutkens https://stackblitz.com/github/easydevgit/next-13-course/tree/master/advanced-routing-intercepting-routes

Tested using 13.4.11-canary.0.

Same!

khuezy commented 1 year ago

@dihan48 Are you going to create the new issue, or should I?

timneutkens commented 1 year ago

I'm going to lock this issue, please read my earlier comments.