Error on build - Next.js 14 - TypeError: Class extends value undefined is not a constructor or null

[billycalladine]

Describe the bug

Context

I am unable to successfully build my Next.js app with next 14 and next swagger doc.

It works fine when running locally but I am unable to build locally and in the ci.

I have noticed the same thing happens when building the example next 14 app

Package versions

• Next.js: 14.1.0
• next-swagger-doc: 0.4.0
• swagger-ui-react: 5.11.8
• @types/swagger-ui-react: 4.18.3

Package Manager

yarn

Console output

yarn run v1.22.21
$ next build
▲ Next.js 14.1.0

- Environments: .env

Creating an optimized production build ...
✓ Compiled successfully

✓ Linting and checking validity of types  
 ✓ Collecting page data  
 Generating static pages (0/6) [= ]Error fetching data from Jira API: Dynamic server usage: Page couldn't be rendered statically because it used `nextUrl.searchParams`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
TypeError: Class extends value undefined is not a constructor or null
    at /Users/x/my-app/.next/server/app/api-doc/page.js:6:106284
    at /Users/x/my-app/.next/server/app/api-doc/page.js:12:320862
    at 8499 (/Users/x/my-app/.next/server/app/api-doc/page.js:12:320878)
    at t (/Users/x/my-app/.next/server/webpack-runtime.js:1:142)
    at 95728 (/Users/x/my-app/.next/server/app/api-doc/page.js:12:322350)
    at t (/Users/x/my-app/.next/server/webpack-runtime.js:1:142)
    at F (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
    at j (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:93244)
    at rP (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33905)
    at nN (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62423)

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

TypeError: Class extends value undefined is not a constructor or null
    at /Users/x/my-app/.next/server/app/api-doc/page.js:6:106284
    at /Users/x/my-app/.next/server/app/api-doc/page.js:12:320862
    at 8499 (/Users/x/my-app/.next/server/app/api-doc/page.js:12:320878)
    at t (/Users/x/my-app/.next/server/webpack-runtime.js:1:142)
    at 95728 (/Users/x/my-app/.next/server/app/api-doc/page.js:12:322350)
    at t (/Users/x/my-app/.next/server/webpack-runtime.js:1:142)
    at F (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
    at j (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:93244)
    at rP (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33905)
    at nN (/Users/x/my-app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62423)
✓ Generating static pages (6/6)

> Export encountered errors on following paths:

        /api-doc/page: /api-doc

error Command failed with exit code 1.

App snippets

/api-doc/page

import { getApiDocs } from "@/lib/swagger";
import { ReactSwagger } from "@/components/ReactSwagger";

export default async function IndexPage() {
  const spec = await getApiDocs();
  return (
    <section className="container">
      <ReactSwagger spec={spec} />
    </section>
  );
}

Reproduction

run yarn build from /examples/next14-app

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 107.69 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[billycalladine]

looks like the same problem is happening here as well

[jellydn]

Could you try with pnpm instead of yarn? I just tried to test and it's working fine for me.

next14-app@0.0.2 build
> next build

   ▲ Next.js 14.1.3

   Creating an optimized production build ...
 ✓ Compiled successfully

./app/layout.tsx
39:22  Warning: Invalid Tailwind CSS classnames order  tailwindcss/classnames-order

./app/page.tsx
13:12  Warning: Invalid Tailwind CSS classnames order  tailwindcss/classnames-order

./components/main-nav.tsx
17:21  Warning: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand!  tailwindcss/enforces-shorthand
28:30  Warning: Invalid Tailwind CSS classnames order  tailwindcss/classnames-order

./components/site-header.tsx
11:13  Warning: Invalid Tailwind CSS classnames order  tailwindcss/classnames-order
27:31  Warning: Classnames 'h-5, w-5' could be replaced by the 'size-5' shorthand!  tailwindcss/enforces-shorthand
42:32  Warning: Classnames 'h-5, w-5' could be replaced by the 'size-5' shorthand!  tailwindcss/enforces-shorthand

./components/tailwind-indicator.tsx
5:10  Warning: Classnames 'h-6, w-6' could be replaced by the 'size-6' shorthand!  tailwindcss/enforces-shorthand

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/6)  [=   ] ⚠ Unsupported metadata themeColor is configured in metadata export in /. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ⚠ Unsupported metadata themeColor is configured in metadata export in /. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ⚠ Unsupported metadata themeColor is configured in metadata export in /_not-found. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ⚠ Unsupported metadata themeColor is configured in metadata export in /_not-found. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ⚠ Unsupported metadata themeColor is configured in metadata export in /api-doc. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ⚠ Unsupported metadata themeColor is configured in metadata export in /api-doc. Please move it to viewport export instead.
Read more: https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 ✓ Generating static pages (6/6) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    176 B          91.6 kB
├ ○ /_not-found                          888 B          85.5 kB
├ ○ /api-doc                             338 kB          423 kB
└ ○ /api/hello                           0 B                0 B
+ First Load JS shared by all            84.6 kB
  ├ chunks/32ef953f-66cc4225b095fd64.js  53.4 kB
  ├ chunks/551-b021e983e2690a70.js       29.2 kB
  └ other shared chunks (total)          2.05 kB


○  (Static)  prerendered as static content

[dogonthehorizon]

I suspect this is a Node issue rather a pnpm vs yarn issue.

I ran into similar behavior when deploying with Vercel. I realized OP and Vercel's version of Node is 18, while my local dev is 20. Forcing Vercel to use v20 (in Beta at time of writing) resolved the build issue for me.

[jellydn]

Right, I'm using v20 on this repository.

❯ z next-swagger-doc
Using Node for alias lts-latest
❯ node -v
v20.10.0

[billycalladine]

bumping to node 20 worked, thanks! 🙇 @dogonthehorizon @jellydn