search

vercel / next.js

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

Error: <Html> should not be imported outside of pages/_document. #56481

Open kobimantzur opened 11 months ago

kobimantzur commented 11 months ago

Link to the code that reproduces this issue

https://github.com/kobimantzur/next-error

To Reproduce

create-next-app is broken.

  1. npx create-next-app@latest test
  2. Enter the generated folder
  3. npm run build

Current vs. Expected behavior

Expected result: build should complete Actual result:

➜  web git:(main) ✗ npm run build

> app@0.1.0 build
> PORT=4001 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
 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Skipping linting
 ✓ Checking validity of types
 ✓ Collecting page data
   Generating static pages (0/2)  [    ]Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/private/var/ski/web/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:4358)
    at Html (/private/var/ski/web/.next/server/chunks/241.js:6:1327)
    at renderWithHooks (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943: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 ei (/private/var/ski/web/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:4358)
    at Html (/private/var/ski/web/.next/server/chunks/241.js:6:1327)
    at renderWithHooks (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/private/var/ski/web/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:4358)
    at Html (/private/var/ski/web/.next/server/chunks/241.js:6:1327)
    at renderWithHooks (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943: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 ei (/private/var/ski/web/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:38:4358)
    at Html (/private/var/ski/web/.next/server/chunks/241.js:6:1327)
    at renderWithHooks (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
    at renderElement (/private/var/ski/web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7)
 ✓ Generating static pages (2/2)

> Export encountered errors on following paths:
    /_error: /404
    /_error: /500
➜  web git:(main) ✗

Verify canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.9.5
Relevant Packages:
  next: 13.5.4
  eslint-config-next: 13.5.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

CLI (create-next-app)

Additional context

No response

NEXT-1709

Null78 commented 11 months ago

same issue with bun@1.0.4 on Apple M1 using bunx create-next-app@latest and bun run dev

TheMythologist commented 11 months ago

I am also facing this issue. I was initially getting errors regarding NextRouter not mounted and tried to narrow down the root cause and eventually came across this issue. Both NextRouter not mounted and <Html> should not be imported outside of pages/_document were followed by Error occurred prerendering page...

OS information:

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.8.0
Relevant Packages:
  next: 13.5.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Note: I've tried using npm instead of pnpm, but the issue persists. For me, it seems to be happening only in non-Windows environments. (It builds successfully on Windows).

Lastly, it seems that I'm also getting You are using a non-standard "NODE_ENV" value in your environment. (despite setting it to either production or development in my Dockerfile. Is this related?

TheMythologist commented 11 months ago

I believe @harrisyn is facing this issue as well (https://github.com/vercel/next.js/issues/54961#issuecomment-1727594268)

vanduc1102 commented 11 months ago

nextjs@13.5.4 works fine on my local , yarn build without error, But I have the issue when run yarn build inside docker image with node user from node:18-bookworm-slim,

So I have to change the user of docker image to root

itsjavi commented 11 months ago

I am also facing this issue. I was initially getting errors regarding NextRouter not mounted and tried to narrow down the root cause and eventually came across this issue. Both NextRouter not mounted and <Html> should not be imported outside of pages/_document were followed by Error occurred prerendering page...

Note: I've tried using npm instead of pnpm, but the issue persists. For me, it seems to be happening only in non-Windows environments. (It builds successfully on Windows).

Lastly, it seems that I'm also getting You are using a non-standard "NODE_ENV" value in your environment. (despite setting it to either production or development in my Dockerfile. Is this related?

I had exactly the same errors, and after removing NODE_ENV=development from my local enviroment (which I did manually set), everything is working again.

I don't know what kind of dark magic is going on behind, but the error messages are not helpful at all. Thank you for pointing that out with the NODE_ENV var.

I switched to my own APP_ENV to avoid issues.

TheMythologist commented 11 months ago

I can confirm, that after removing ENV NODE_ENV=development from my Dockerfile, the build now succeeds. Can someone from the main next.js team confirm if this is intended? (I would prefer if this were not the case).

Additionally, set NODE_ENV=development in Windows will cause the build to fail as well, so it's not OS/platform-dependent.

harrisyn commented 11 months ago

I can confirm, that after removing ENV NODE_ENV=development from my Dockerfile, the build now succeeds. Can someone from the main next.js team confirm if this is intended? (I would prefer if this were not the case).

Additionally, set NODE_ENV=development in Windows will cause the build to fail as well, so it's not OS/platform-dependent.

This was the issue for me as well. Switched to APP_ENV for all my use cases and it builds fine now.

karlhorky commented 10 months ago

Interesting, also seeing these failures on Pages Router when using NODE_ENV=test next dev ("Test default values [from the .env.test file] will be loaded if NODE_ENV is set to test" as per the Next.js environment variables docs) on latest canary next@13.5.7-canary.25

Screenshot 2023-10-25 at 13 48 30

$ NODE_ENV=test yarn dev
$ next dev --port 3020
   ▲ Next.js 13.5.7-canary.25
   - Local:        http://localhost:3020
   - Environments: .env.test

 ✓ Ready in 3.1s
 ✓ Compiled /middleware in 276ms (63 modules)
 ○ Compiling / ...
 ✓ Compiled / in 2s (403 modules)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ○ Compiling /_error ...
 ✓ Compiled /_error in 571ms (405 modules)
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⨯ Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⨯ Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) {
  page: '/'
}
 ⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/k/p/courses/node_modules/next/dist/client/router.js:146:15)
    at App (webpack-internal:///./pages/_app.tsx:101:77)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) {
  page: '/'
}
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⨯ Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
 ⨯ Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
    at ei (/Users/k/p/courses/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:4358)
    at Html (/Users/k/p/courses/node_modules/next/dist/pages/_document.js:691:132)
    at renderWithHooks (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/k/p/courses/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)

I remember reporting an issue with NODE_ENV=test also causing failures, but not sure if related:

cc @huozhi and @ijjk

frindly commented 10 months ago

I still see this happening on my monorepo with the 14.0.0 release :(

TheMythologist commented 10 months ago

Managed to boil the issue down to this change: https://github.com/vercel/next.js/pull/52997 The issue happens between 13.4.20-canary.19 and 13.4.20-canary.20

Can someone help to rectify? I'm not very familiar with next.js internals

karlhorky commented 10 months ago

Created a reproduction of the <Html> should not be imported outside of pages/_document error on Next.js 14.0.2-canary.3:

CodeSandbox: https://codesandbox.io/p/sandbox/fervent-stonebraker-mn8sln?file=%2Fpackage.json%3A8%2C18

Screenshot 2023-11-01 at 12 05 19

karlhorky commented 10 months ago

Created a reproduction of the NextRouter was not mounted error on Next.js 14.0.2-canary.3:

CodeSandbox: https://codesandbox.io/p/sandbox/upbeat-voice-ykyp76?file=%2Fpages%2F_app.tsx%3A3%2C1

Screenshot 2023-11-01 at 12 11 48

karlhorky commented 10 months ago

It appears that the problems in both of these reproductions above are caused by a regression in Next.js with imports using .js suffixes (which are ESM fully specified imports as implemented in this PR)

Workarounds

  1. Remove the .js suffix for the import (downside: TS type errors with module: 'Node16' and module: 'NodeNext')
  2. Remove the NODE_ENV=test (downside: problems with your application)
TheMythologist commented 10 months ago

@karlhorky the workarounds do not work either when defining NODE_ENV for the build step, do you have any workarounds for that?

karlhorky commented 10 months ago

the workarounds do not work either when defining NODE_ENV for the build step

I'm not sure, my reproductions above only concerned the dev server. If you can create a reproduction that shows that next build also fails with NODE_ENV being set, that would also be interesting information for maintainers like @huozhi

TheMythologist commented 10 months ago

Links for next build failing with NODE_ENV being set to appropriate values (i.e. test, development and production)

CodeSandbox for NextRouter was not mounted: https://codesandbox.io/p/sandbox/8slztq?file=%2Fpages%2F_app.tsx%3A1%2C1

CodeSandbox for <Html> should not be imported outside of pages/_document: https://codesandbox.io/p/sandbox/dawn-sea-8flsr4?file=%2Fpages%2F_document.tsx

Note: They are identical to the codesandbox linked above, just with the first workaround implemented and the NODE_ENV defined for the build step.

karlhorky commented 10 months ago

Thanks for the additional reproductions!

Interesting, it seems that Next.js thinks that development is a non-standard NODE_ENV, which is not true according to the docs page:

$ NODE_ENV=development 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
 ✓ Linting and checking validity of types    
   ▲ Next.js 14.0.2-canary.3

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Collecting page data    
   Generating static pages (0/3)  [=   ]Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/workspace/.next/server/chunks/163.js:1:15612)
MaciejWiatr commented 10 months ago

Also experiencing this issue, temporarly downgrading nextjs to 13.4.12 has resolved it but im sure that's not the fix we're looking for...

barrymichaeldoyle commented 10 months ago

I'm getting the same issue with next@14.0.1, it works fine when I build locally using my M2 chip Mac, but not when I try to deploy on Vercel...

lsbyerley commented 10 months ago

Getting this error in a newly created create-next-app with the with-supabase template. Using npm and seeing this when running next build

https://github.com/vercel/next.js/tree/canary/examples/with-supabase

barrymichaeldoyle commented 10 months ago

I was using bun and when I switched back to npm it started working for me. Unfortunate because using bun was a much better developer experience.

TheMythologist commented 9 months ago

Hi, is there any update regarding this?

karlhorky commented 9 months ago

I forked my sandboxes to new ones using the latest canary next@14.0.4-canary.32 and confirmed the problem remains when using fully-specified ESM import paths (with .js extension):

1. <Html> error (original sandbox)

Error: <Html> should not be imported outside of pages/_document.

CodeSandbox: https://codesandbox.io/p/devbox/beautiful-grass-yvl7nh?file=%2Fpages%2F_document.tsx%3A14%2C1

Screenshot 2023-12-01 at 11 46 17

2. NextRouter error (original sandbox)

Error: NextRouter was not mounted

CodeSandbox: https://codesandbox.io/p/devbox/zen-wozniak-j3s9wd?file=%2Fpages%2F_app.tsx%3A6%2C1

Screenshot 2023-12-01 at 11 40 40

Lumi669 commented 6 months ago

I am also facing this issue. I was initially getting errors regarding NextRouter not mounted and tried to narrow down the root cause and eventually came across this issue. Both NextRouter not mounted and <Html> should not be imported outside of pages/_document were followed by Error occurred prerendering page...

OS information:

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.8.0
Relevant Packages:
  next: 13.5.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Note: I've tried using npm instead of pnpm, but the issue persists. For me, it seems to be happening only in non-Windows environments. (It builds successfully on Windows).

Lastly, it seems that I'm also getting You are using a non-standard "NODE_ENV" value in your environment. (despite setting it to either production or development in my Dockerfile. Is this related?

I am facing both issues as well with "next": "14.1.0", mac m2, both were fixed with @jonahsnider 's method, https://github.com/jonahsnider/frc-colors.com/commit/2ca1634cc53dbf5ea20d61df5d25be0b2a9c3068

kcrwfrd commented 4 months ago

@itsjavi I could cry tears of joy for finally figuring this out thanks to your comment. I was going absolutely mad. Thank you 🙏🏼

WooodHead commented 2 months ago

NODE_ENV=production next build solved the problem.

graphikjunkie commented 1 month ago

This isn't a good fix. The issue of setting NODE_ENV to anything other than production causing errors remains unresolved.

glossopm commented 3 weeks ago

I'm trying to upgrade next to fix several security vulnerabilities and have come across this issue. We use NODE_ENV=development for our development environments. The fix shouldn't just be to change these to production.

Upgrading from 13.4.12 -> 13.5.6 and 13.4.12 -> 14.2.7 both have this same issue with the builds failing for development.

Any timeline on a fix for this?

itsjavi commented 3 weeks ago

I'm trying to upgrade next to fix several security vulnerabilities and have come across this issue. We use NODE_ENV=development for our development environments. The fix shouldn't just be to change these to production.

Upgrading from 13.4.12 -> 13.5.6 and 13.4.12 -> 14.2.7 both have this same issue with the builds failing for development.

Any timeline on a fix for this?

the only solution for now is to not set that manually, and use another env var like APP_ENV