next.js icon indicating copy to clipboard operation
next.js copied to clipboard
Published 4 months ago • verified publisher icon vercel

Error occurred prerendering page "/_not-found" with pageExtensions option

Open Krasnopir opened this issue 1 year ago • 27 comments

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/misty-glade-yh92cc

To Reproduce

After update to 14.2.* version, when i use pageExtensions in next.config, i got an error while try to build my app

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts'],
}

i have in my app folder all files with .page.tsx -

app:
- error.page.tsx
- global-error.page.tsx
- not-found.page.tsx
- layout.page.tsx
- page.page.tsx

Current vs. Expected behavior

Build app fail with pageExtentions option

✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/8)  [=   ]
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of undefined (reading 'clientModules')
    at /home/ui/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:23603
    at /home/ui/node_modules/next/dist/server/lib/trace/tracer.js:191:62
    at /home/ui/node_modules/next/dist/server/lib/trace/tracer.js:140:36
    at NoopContextManager.with (/home/ui/node_modules/@opentelemetry/api/build/src/context/NoopContextManager.js:25:19)
    at ContextAPI.with (/home/node_modules/@opentelemetry/api/build/src/api/context.js:60:46)
    at NoopTracer.startActiveSpan (/home/ui/node_modules/@opentelemetry/api/build/src/trace/NoopTracer.js:65:31)
    at ProxyTracer.startActiveSpan (/home/ui/node_modules/@opentelemetry/api/build/src/trace/ProxyTracer.js:36:24)
    at /home/ui/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/ui/node_modules/@opentelemetry/api/build/src/context/NoopContextManager.js:25:19)
    at ContextAPI.with (/home/ui/node_modules/@opentelemetry/api/build/src/api/context.js:60:46)
 ✓ Generating static pages (8/8)

> Export encountered errors on following paths:
	/_not-found/page: /_not-found

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Apr  4 14:39:20 UTC 2
  Available memory (MB): 15622
  Available CPU cores: 12
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure

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

next build (local)

Additional context

No response

Krasnopir avatar May 07 '24 11:05 Krasnopir

I have suddenly the same error. There were no changes made and this error happens when deploying the application. Build locally works fine, vercel deploy throws this error.


TypeError: Cannot read properties of null (reading 'auth')
--
16:38:14.053 | at a (/vercel/path0/.next/server/chunks/625.js:6:215122)
16:38:14.053 | at O (/vercel/path0/.next/server/chunks/625.js:6:174074)
16:38:14.053 | at /vercel/path0/.next/server/chunks/625.js:6:175009
16:38:14.053 | at Object.nr [as useMemo] (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39088)
16:38:14.053 | at t.useMemo (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:106635)
16:38:14.053 | at /vercel/path0/.next/server/chunks/625.js:6:174977
16:38:14.053 | at nP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58441)
16:38:14.053 | at n$ (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61978)
16:38:14.053 | at nE (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:44877)
16:38:14.053 | at nP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58448)
16:38:14.105 |  
16:38:14.105 | Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
16:38:14.105 | TypeError: Cannot read properties of null (reading 'auth')
16:38:14.105 | at a (/vercel/path0/.next/server/chunks/625.js:6:215122)
16:38:14.105 | at O (/vercel/path0/.next/server/chunks/625.js:6:174074)
16:38:14.105 | at /vercel/path0/.next/server/chunks/625.js:6:175009
16:38:14.106 | at Object.nr [as useMemo] (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:39088)
16:38:14.106 | at t.useMemo (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:106635)
16:38:14.106 | at /vercel/path0/.next/server/chunks/625.js:6:174977
16:38:14.106 | at nP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58441)
16:38:14.106 | at n$ (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61978)
16:38:14.109 | at nE (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:44877)
16:38:14.109 | at nP (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:58448)
16:38:14.536 | Generating static pages (11/44)
16:38:18.106 | Generating static pages (22/44)
16:38:20.328 | Generating static pages (33/44)
16:38:21.301 | ✓ Generating static pages (44/44)
16:38:21.311 |  
16:38:21.313 | > Export encountered errors on following paths:
16:38:21.313 | /_not-found

sergejreznik avatar May 11 '24 14:05 sergejreznik

I went spelunking in the code, and this looks suspicious to me:

https://github.com/vercel/next.js/blob/c1f8d9317588e51a8a31240f6add36b5f2c9f9bf/packages/next/src/server/app-render/app-render.tsx#L693-L694

This non-null assertion means clientReferenceManifest could actually be null or undefined and TypeScript won't check it. If it's undefined, you'll get the TypeError: Cannot read properties of undefined (reading 'clientModules') on, say, line 946:

https://github.com/vercel/next.js/blob/c1f8d9317588e51a8a31240f6add36b5f2c9f9bf/packages/next/src/server/app-render/app-render.tsx#L944-L951

My guess is that this issue was introduced here: https://github.com/vercel/next.js/pull/64313

But I definitely don't have enough knowledge or context to confirm that or offer a suggestion on how to fix this

awmottaz avatar May 13 '24 16:05 awmottaz

Another thing I found — after running a build, looking at the .next/app-paths-manifest.json file, I see an entry for "/_not-found/page": "app/_not-found/page.js". I also noticed that for every other entry in there, there is a corresponding <bundlename>-client-reference-manifest.js, but this file is missing for the not-found page.

# notice that a file shows up for every page entry
# but is missing for the not-found page
find .next/ -path '*client-reference-manifest.js'

I'm guessing that this missing file corresponds to an undefined clientReferenceManifest I mentioned in my last comment.

When I downgrade to v14.1.4, I see a couple of differences:

  • The not-found page is built to .next/server/app/_not-found.js (instead of .next/server/app/_not-found/page.js in v14.2.3)
  • The file .next/server/app/_not-found_client-reference-manifest.js exists

I now think this bug was caused by https://github.com/vercel/next.js/pull/62679

awmottaz avatar May 13 '24 16:05 awmottaz

Maybe this if statement evaluates to false when using page extensions?

https://github.com/vercel/next.js/blob/c1f8d9317588e51a8a31240f6add36b5f2c9f9bf/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L349-L352

awmottaz avatar May 13 '24 16:05 awmottaz

Here's a minimal reproduction https://github.com/awmottaz/next-typeerror-not-found

awmottaz avatar May 13 '24 17:05 awmottaz

I have the same issue, builds fine locally but on Vercel I get this error:

[20:37:58.035] Running build in Washington, D.C., USA (East) – iad1
[20:37:59.058] Cloning github.com/riccardolardi/maybeparis-next (Branch: main, Commit: 2875c34)
[20:37:59.894] Cloning completed: 835.705ms
[20:38:04.646] Restored build cache
[20:38:04.883] Running "vercel build"
[20:38:05.934] Vercel CLI 34.1.10
[20:38:06.673] Installing dependencies...
[20:38:07.448] yarn install v1.22.19
[20:38:07.646] [1/4] Resolving packages...
[20:38:08.138] [2/4] Fetching packages...
[20:38:08.146] warning Pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"] is trying to unpack in the same destination "/vercel/.cache/yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
[20:38:08.146] warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/vercel/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
[20:38:08.146] warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "/vercel/.cache/yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
[20:38:32.651] [3/4] Linking dependencies...
[20:38:32.652] warning " > [email protected]" has unmet peer dependency "@urql/core@^5.0.0".
[20:38:37.594] [4/4] Building fresh packages...
[20:38:37.611] Done in 30.17s.
[20:38:37.660] Detected Next.js version: 14.2.3
[20:38:37.662] Running "yarn run build"
[20:38:37.869] yarn run v1.22.19
[20:38:37.892] $ next build
[20:38:38.676]   ▲ Next.js 14.2.3
[20:38:38.676] 
[20:38:38.751]    Creating an optimized production build ...
[20:38:52.305]  ✓ Compiled successfully
[20:38:52.306]    Linting and checking validity of types ...
[20:38:59.325]    Collecting page data ...
[20:38:59.842] TypeError [ERR_INVALID_URL]: Invalid URL
[20:38:59.842]     at new NodeError (node:internal/errors:405:5)
[20:38:59.842]     at new URL (node:internal/url:676:13)
[20:38:59.843]     at 6192 (/vercel/path0/.next/server/app/_not-found/page.js:1:4320)
[20:38:59.843]     at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[20:38:59.843]     at 338 (/vercel/path0/.next/server/app/_not-found/page.js:1:954)
[20:38:59.843]     at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
[20:38:59.844]     at n (/vercel/path0/.next/server/app/_not-found/page.js:43:75)
[20:38:59.848]     at /vercel/path0/.next/server/app/_not-found/page.js:43:106
[20:38:59.848]     at t.X (/vercel/path0/.next/server/webpack-runtime.js:1:1206)
[20:38:59.848]     at /vercel/path0/.next/server/app/_not-found/page.js:43:88 {
[20:38:59.848]   input: 'undefined',
[20:38:59.848]   code: 'ERR_INVALID_URL'
[20:38:59.849] }
[20:38:59.849] 
[20:38:59.849] > Build error occurred
[20:38:59.849] Error: Failed to collect page data for /_not-found
[20:38:59.849]     at /vercel/path0/node_modules/next/dist/build/utils.js:1268:15
[20:38:59.849]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[20:38:59.849]   type: 'Error'
[20:38:59.849] }
[20:38:59.887] error Command failed with exit code 1.
[20:38:59.888] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[20:38:59.927] Error: Command "yarn run build" exited with 1
[20:39:00.377]

riccardolardi avatar May 16 '24 18:05 riccardolardi

Since today the build suddenly succeeds... must've been something related to Vercel?

riccardolardi avatar May 17 '24 07:05 riccardolardi

Since today the build suddenly succeeds... must've been something related to Vercel?

Not Vercel. I'm struggling with local builds and our AWS server is spitting out the same error too

quantafire avatar May 17 '24 10:05 quantafire

Another thing I found — after running a build, looking at the .next/app-paths-manifest.json file, I see an entry for "/_not-found/page": "app/_not-found/page.js". I also noticed that for every other entry in there, there is a corresponding <bundlename>-client-reference-manifest.js, but this file is missing for the not-found page.

# notice that a file shows up for every page entry
# but is missing for the not-found page
find .next/ -path '*client-reference-manifest.js'

I'm guessing that this missing file corresponds to an undefined clientReferenceManifest I mentioned in my last comment.

When I downgrade to v14.1.4, I see a couple of differences:

* The not-found page is built to `.next/server/app/_not-found.js` (instead of `.next/server/app/_not-found/page.js` in v14.2.3)

* The file `.next/server/app/_not-found_client-reference-manifest.js` exists

I now think this bug was caused by #62679

Downgraded to 14.1.4 from my package.json, and I can confirm I no longer see the following error:

> Export encountered errors on following paths:
	/_not-found/page: /_not-found

jon-dez avatar Jun 03 '24 06:06 jon-dez

experiencing same issue after upgrade to 15-rc

yanv1991 avatar Jun 10 '24 15:06 yanv1991

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

petrosmm avatar Jun 28 '24 18:06 petrosmm

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

I think my problem was that I was having page.tsx inside an (index) folder. Taking it out there solved the issue if I remember correctly

riccardolardi avatar Jun 29 '24 12:06 riccardolardi

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

I think my problem was that I was having page.tsx inside an (index) folder. Taking it out there solved the issue if I remember correctly

thank you for the quick reply. I don't have my index page inside a folder. But again would help to know what version you're using of 14 or if it's a canary of 15?

petrosmm avatar Jul 01 '24 13:07 petrosmm

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

I think my problem was that I was having page.tsx inside an (index) folder. Taking it out there solved the issue if I remember correctly

thank you for the quick reply. I don't have my index page inside a folder. But again would help to know what version you're using of 14 or if it's a canary of 15?

I'm using latest 14

riccardolardi avatar Jul 01 '24 19:07 riccardolardi

I get a similar error... I should also mention that im using next-intl

Generating static pages (0/7) [ ]Error

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

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

✓ Generating static pages (7/7)

Export encountered errors on following paths: /_not-found/page: /_not-found /page: /

ericpark11 avatar Jul 02 '24 11:07 ericpark11

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

I think my problem was that I was having page.tsx inside an (index) folder. Taking it out there solved the issue if I remember correctly

thank you for the quick reply. I don't have my index page inside a folder. But again would help to know what version you're using of 14 or if it's a canary of 15?

I'm using latest 14

@riccardolardi So 14.2.4 and are you using page extensions like OP?

petrosmm avatar Jul 02 '24 12:07 petrosmm

Since today the build suddenly succeeds... must've been something related to Vercel?

What version is working for you?

I think my problem was that I was having page.tsx inside an (index) folder. Taking it out there solved the issue if I remember correctly

thank you for the quick reply. I don't have my index page inside a folder. But again would help to know what version you're using of 14 or if it's a canary of 15?

I'm using latest 14

@riccardolardi So 14.2.4 and are you using page extensions like OP?

Yes, but no page extensions

riccardolardi avatar Jul 02 '24 15:07 riccardolardi

I am facing the same not found pre-render page issue while deploying in vercel in next js version 14.2.4. Any solutions?

Santhoshkumar5645 avatar Jul 24 '24 06:07 Santhoshkumar5645

I don't have a notfounD page yet I get the error; Export encountered errors on following paths: /_not-found/page: /_not-found. I am also dealing with useSearchParams() should be wrapped in a suspense boundary at page "/404". Anyone have an idea what this is? Which /404 is it talking about? This file does not exist...

tongene avatar Jul 24 '24 13:07 tongene

@ericpark11 - Did you ever find a solution to this? I just installed next-intl into a new project and am facing the same issue. Thanks.

donbellamy avatar Aug 08 '24 14:08 donbellamy

is there anyway to sponsor a fix for this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

petrosmm avatar Aug 08 '24 14:08 petrosmm

@donbellamy I have fixed the issue but i was well into the project so I really had to make a new copy folder and really get down to the issue which was a pain. I think it was a minor async and use client issue. If you have just started i would just recommend following the next-intl document or watch a youtube video to get it going

ericpark11 avatar Aug 08 '24 16:08 ericpark11

@ericpark11 did you fix the issue on next.js itself or next-intl project?

petrosmm avatar Aug 09 '24 19:08 petrosmm

for me it was nextjs itself iirc @petrosmm

ericpark11 avatar Aug 10 '24 00:08 ericpark11

any chance you'll PR your fix into the nextjs code to fix this issue? -- I am assuming it is related to the not-found page and the use of pageExtensions @ericpark11

petrosmm avatar Aug 10 '24 16:08 petrosmm

From my research, it seems that the only workaround is to use “not-found.ts” or "not-found.tsx".

Briefly, the workaround is to use the file not-found.ts instead of not-found<pageExtensions> even when using custom pageExtensions.

  1. add "ts" to "pageExtensions" option
  2. use not-found.ts instad of not-found<pageExtensions> file
/** @type {import("next").NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    pageExtensions: [
        "page.tsx",
        "page.ts",
        // FIXME: Next.js has a bug which does not resolve not-found.page.tsx correctly
        // Instead, use `not-found.ts` as a workaround
        // "ts" is required to resolve `not-found.ts`
        // https://github.com/vercel/next.js/issues/65447
        "ts"
    ],
};
module.exports = nextConfig;

📝 Probably, You can also work around this by using pageExtensions: [... "tsx"] and not-found.tsx. However, users of pageExtensions will want to avoid the combination of pageExtensions: [“page.tsx”, “tsx”][^1], so the example is written with pageExtensions: [..., "ts"].

Example:

  • Repo: https://github.com/azu/next-typeerror-not-found-workaround
  • Fix commit: https://github.com/azu/next-typeerror-not-found-workaround/commit/10f57454ae69acac4014f61078d72e0871e86b79

This example is based on @riccardolardi reproduce repo

  • Repdoruce of this issue: https://github.com/vercel/next.js/issues/65447#issuecomment-2108277649

However, I believe this behavior is a bug because it is inconsistent. I expect it to be corrected for this reason.

[^1]: The combination of “page.tsx” and “tsx” is likely to generate a “Duplicate page detected.” warning, and I not want to specify these into the pageExtensions option at the same time.

azu avatar Aug 17 '24 09:08 azu

I also had this issue and i think i managed to fix it this morning. I'm using next-intl as well (like few other people here) and fix for me was turning not-found.tsx page into server component and adding "force-dynamic" on top:

export const dynamic = "force-dynamic";
import { redirect } from "next/navigation";

export default function NotFound() {
  redirect("/dashboard");
  return <div></div>;
}

I also added unstable_setRequestLocale(params.locale); to all layout and page components which are server components. That alone didn't help, but the above mentioned solution did. Hope it helps someone!

My next.config.mjs file looks like this:

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
};

export default withNextIntl(nextConfig);

mk0y avatar Aug 27 '24 10:08 mk0y

I also had this issue and i think i managed to fix it this morning. I'm using next-intl as well (like few other people here) and fix for me was turning not-found.tsx page into server component and adding "force-dynamic" on top:

export const dynamic = "force-dynamic";
import { redirect } from "next/navigation";

export default function NotFound() {
  redirect("/dashboard");
  return <div></div>;
}

I also added unstable_setRequestLocale(params.locale); to all layout and page components which are server components. That alone didn't help, but the above mentioned solution did. Hope it helps someone!

My next.config.mjs file looks like this:

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  reactStrictMode: true,
};

export default withNextIntl(nextConfig);

Thank you so much !! I had any not-found.tsx files, to fix this issue I made not-found.tsx in app dir. (/app/not-found.tsx)

// app/not-found.tsx

export const dynamic = "force-dynamic";

export default function NotFound() {
  return <></>;
}

"next": "^14.2.7", "next-intl": "^3.18.1", "react": "^18.3.1", "react-dom": "^18.3.1",

dition0221 avatar Aug 30 '24 06:08 dition0221

Export encountered errors on following paths: /_not-found/page: /_not-found /home/page: /home /page: /

I had the same problem and in my case it was useSearchParams(); declared in a useContext.

I managed to keep version 15rc by removing it from the context.

xpointsolucoes avatar Sep 05 '24 14:09 xpointsolucoes

The issue is not with the not-found default page itself. The error is a bit confusing though. If you click the first line in the error it would take you to the piece of code. In my case it was the Quill import from 2.0.2 which was leading to it. the exact code was document.addEventListner where document was unavailable. Somehow making the component where it was being imported as 'use client' was not solving the issue. Changing to lazy loading the library fixed the issue though.

aphougat avatar Sep 05 '24 16:09 aphougat