search

vercel / next.js

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

Error: Failed to load script when using basePath and navigating from pages to app router #65246

Open seanparmelee opened 2 weeks ago

seanparmelee commented 2 weeks ago

Link to the code that reproduces this issue

https://github.com/seanparmelee/nextjs-pages-to-app-router

To Reproduce

  1. Run npm run dev (or npm run dev:turbo for turbo mode)
  2. Navigate to http://localhost:3000/foo
  3. Click the link
  4. Observe the errors in the browser console (also in the server console when using turbo mode)

Current vs. Expected behavior

I expected the page to load without any errors, but instead the page loads and the browser contains a couple errors:

GET http://localhost:3000/foo/_next/static/chunks/pages/bar.js net::ERR_ABORTED 404 (Not Found)
Error: Failed to load script: /foo/_next/static/chunks/pages/bar.js

When running in turbo mode, the following error is emitting on the server side:

PageNotFoundError: Cannot find module for page: /bar
    at findPagePathData (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/dev/on-demand-entry-handler.js:328:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.ensurePage (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/dev/hot-reloader-turbopack.js:600:42)
    at async Object.run (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/dev/hot-reloader-turbopack.js:409:21)
    at async handleRequest (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/lib/router-server.js:205:43)
    at async requestHandlerImpl (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/Users/sean.parmelee/Projects/nextjs-pages-to-app-router/node_modules/next/dist/server/lib/start-server.js:142:13)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.2
Relevant Packages:
  next: 14.3.0-canary.34 // Latest available version is detected (14.3.0-canary.34).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Module Resolution, Navigation, Pages Router, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

If you remove the basePath from next.config.js, then the error no longer happens when navigating. I downgraded all the way back to Next.js 13.4 since that's when the app router went stable and was still able to reproduce this error. One thing I found interesting with 13.4.0 is that the error happens even if there isn't a basePath set. This seems to have been fixed in 13.4.1-canary.2 because starting with that version I no longer see the error unless I set a basePath.