[NEXT-588] fetch to App Route + router.refresh() causes crash

[Josehower]

Verify canary release

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

Provide environment information

➜  api-app-dir git:(main) yarn next info
yarn run v1.22.19
$ /home/josehower/upleveled-projects/api-app-dir/node_modules/.bin/next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Wed Nov 23 01:01:46 UTC 2022
    Binaries:
      Node: 16.19.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.18.2
    Relevant packages:
      next: 13.1.7-canary.15
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Done in 1.76s.

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

No response

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-mg1bxt?file=app%2Fpage.tsx,app%2Flayout.tsx

To Reproduce

The reproduction example contains a single button that perform a fetch request to a very simple API route in app/apizz/route.ts.

router.refresh() breaks the app if you use it after the fetch.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
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
event - compiled client and server successfully in 446 ms (247 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 312 ms (438 modules)
wait  - compiling /api/route (client and server)...
event - compiled client and server successfully in 103 ms (403 modules)
error - node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (229:60) @ clientReference
error - TypeError: Cannot read properties of undefined (reading '')
    at stringify (<anonymous>)
null
error - node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (229:60) @ clientReference
error - TypeError: Cannot read properties of undefined (reading '')
    at stringify (<anonymous>)
null

This doesn't happen if the API route exists in /pages/api

https://stackblitz.com/edit/vercel-next-js-mt4boz?file=app%2Fpage.tsx

Describe the Bug

The bug break the app when we try a redirection using router.push() after a fetch request to an API route in app/ directory

Expected Behavior

api routes in app directory should allow a redirection after a fetch request similar to pages/api.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-588

[zhyd1997]

the bug occurred here:

next.js/packages/next/src/compiled/react-server-dom-webpack/server.browser.js

Line 229 in 65390b5

var resolvedModuleData = config[clientReference.filepath][clientReference.name];

config always stores files in appDir, which is not consistent with filePath (possible is node_modules/next/dist/client/*).

[karlhorky]

Cc @huozhi

[karlhorky]

This still occurs on [email protected], new demo:

StackBlitz demo: https://stackblitz.com/edit/vercel-next-js-vyumbh?file=app%2Fpage.tsx

[karlhorky]

Seems like other users are also experiencing this:

• Error when using robots.txt and sitemap.xml as route handlers in appDir #45947

[karlhorky]

This still occurs on [email protected], new demo:

StackBlitz demo: https://stackblitz.com/edit/vercel-next-js-wzdzon?file=app%2Fpage.tsx

[karlhorky]

Great, just confirmed that #46102 works! (released in [email protected]). New demo:

StackBlitz demo: https://stackblitz.com/edit/vercel-next-js-r58uun?file=app%2Fpage.tsx,app%2Flayout.tsx

[github-actions]

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.