Reputation: 1170

TypeError: Class extends value undefined is not a constructor or null while running next.js

While running

npm run dev

I suddenly start getting error without pretty much any change to the code of the project:

TypeError: Class extends value undefined is not a constructor or null
    at Object.618 (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:100)
    at __nccwpck_require__ (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at Object.270 (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:413)
    at __nccwpck_require__ (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at Object.327 (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:260)
    at __nccwpck_require__ (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at Object.845 (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:3733)
    at __nccwpck_require__ (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11735)
    at /Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11863
    at Object.<anonymous> (/Users/EugeneBos/Websites/dotalaning/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11889)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)

Modifying the code of the app so it won't include any files or load anything still produces the same error.

Upvotes: 9

Answers (7)

Mohammed

Reputation: 41

I encountered this issue with my project. I actually did some changes to the code but those changes were working fine in other pages, I realized that I used a client component(directly in in server component) which happen to have an old package that use a class component without using "use client" directive in that component. I fixed the issue by adding "use client" to the component I used in the server component.

Upvotes: 0

Eugene

Reputation: 1170

1 Try removing node_modules and installing everything again have helped.

rm -rf node_modules
npm install

2 The problem may be caused by the version of Node JS (too old or too new). In this case, you may change it with n or nvm (the latest has a version for Windows too)

Upvotes: 8

tdranv

Reputation: 1340

A bit late to the party but still...

In my case I had a custom exception that extended AssertionError, imported from assert (coming from node).

Upvotes: 0

iagowp

Reputation: 2494

Just adding another possible reason for this:

Node version might not be supported.

I just created a new nextjs project (currently version 13.4), and my node version was 16.5, but if using node 16, the minimum accepted was 16.14

Upvotes: 3

Abdelrhman Arnos

Reputation: 1442

Just update npm...

Sometimes it relates to the npm version, try to use the newest version of npm. It was happening to me on v6.14, once I updated npm to v8.1 the issue was resolved.

Upvotes: 3