search

vercel / next.js

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

`next build` failing to build static pages on pages router due to `Error: NextRouter was not mounted` #65290

Open kcrwfrd opened 2 weeks ago

kcrwfrd commented 2 weeks ago

Link to the code that reproduces this issue

https://github.com/kcrwfrd/next.js-pages-build-error-reproduction

To Reproduce

npx create-next-app -e reproduction-template-pages

Then I added a useRouter() call to my pages/index.tsx.

(fwiw just a fresh reproduction-template-pages template already suffered some of these errors you see, but adding the useRouter() call reproduced the same Error: NextRouter was not mounted error that I was trying to troubleshoot in my original app).

❯ npm run build

> build
> next build

 ⚠ You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-env
  ▲ Next.js 14.3.0-canary.36

 ✓ Linting and checking validity of types
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data
   Generating static pages (0/3)  [    ]Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at Y (/Users/kevin.crawford/dev/pages-test/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
    at I (/Users/kevin.crawford/dev/pages-test/.next/server/chunks/899.js:6:1263)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error

Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at Y (/Users/kevin.crawford/dev/pages-test/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
    at I (/Users/kevin.crawford/dev/pages-test/.next/server/chunks/899.js:6:1263)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at Y (/Users/kevin.crawford/dev/pages-test/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
    at I (/Users/kevin.crawford/dev/pages-test/.next/server/chunks/899.js:6:1263)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error

Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at Y (/Users/kevin.crawford/dev/pages-test/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
    at I (/Users/kevin.crawford/dev/pages-test/.next/server/chunks/899.js:6:1263)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at h (/Users/kevin.crawford/dev/pages-test/.next/server/pages/index.js:1:13427)
    at d (/Users/kevin.crawford/dev/pages-test/.next/server/pages/index.js:1:972)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at h (/Users/kevin.crawford/dev/pages-test/.next/server/pages/index.js:1:13427)
    at d (/Users/kevin.crawford/dev/pages-test/.next/server/pages/index.js:1:972)
    at renderWithHooks (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at finishClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/Users/kevin.crawford/dev/pages-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5954:7)
 ✓ Generating static pages (3/3)

> Export encountered errors on following paths:
    /
    /_error: /404
    /_error: /500

Current vs. Expected behavior

Static pages are expected to successfully build, but they are failing.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Mon Feb 19 19:45:09 PST 2024; root:xnu-8796.141.3.704.6~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 18.20.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.36 // Latest available version is detected (14.3.0-canary.36).
  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)

Pages Router

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

next build (local)

Additional context

No response

kcrwfrd commented 2 weeks ago

It turns out this is actually caused by the same issue described here: https://github.com/vercel/next.js/issues/56481#issuecomment-1755369676

I had the following in my ~/.zshrc

export NODE_ENV="development"

So, to update the steps to reproduce:

NODE_ENV=development npm run build

There is a warning that gets printed and links to https://nextjs.org/docs/messages/non-standard-node-env, but it is confusing because development is a valid value.