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

[jellydn]

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

[billycalladine]

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

[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.

[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.

[email protected] 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

[jellydn]

Right, I'm using v20 on this repository.

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