stylelint gives error "Class extends value undefined is not a constructor or null" when introducing stylelint-config-standard-scss

Question

I'm at at a bit of a loss today. I wanted to add Stylelint to my Angular project, so I ran

npm install stylelint stylelint-config-standard --save-dev

to install stylelint and the standard config plug in. I then created a .stylelintrc file and added the follow code to it:

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "rule-empty-line-before": "always",
    "comment-empty-line-before": "always"
  }
}

When running the following command npx stylelint \"src/app/**/*.{css,scss}\" from the terminal I noticed all worked well but as I am using scss in my Angular project I saw some errors. To prevent these scss based errors I decided to introduce the stylelint-config-standard-scss plugin. I installed this using npm then updated the code in my .stylelintrc file to the following:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss"
  ],
  "rules": {
    "rule-empty-line-before": "always",
    "comment-empty-line-before": "always"
  }
}

Now when I run the command npx stylelint \"src/app/**/*.{css,scss}\" I get the following error!

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/myuser/my-project/node_modules/postcss-scss/lib/nested-declaration.js:3:33)
    at Module._compile (/Users/myuser/my-project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/Users/myuser/my-project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/myuser/my-project/node_modules/postcss-scss/lib/scss-parser.js:4:25)
    at Module._compile (/Users/myuser/my-project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

I can't understand why this is happening. The stylelint-config-standard-scss plugin is downloaded and in my node_modules folder. There isn't a syntax error in my .stylelintrc file. My node version is good (v14.18.1), I even uninstalled and reinstalled all npm packages but I get the same error? Has anyone else had this problem and was able to resolve it?

Many thanks in advance.

Kittie

Answer 1

I had this problem, I managed to fix this by adding postcss as a dev dependency in the package.json file, for example:

"devDependencies": {
   "postcss": "^8.4.13"
}

Griz

Now I am stuck with PostCSS warnings saying it does nothing until I fix some postCSS config file :( This fixed it for me: https://mcmap.net/q/963445/-getting-postcss-warning-without-using-it – Korry

Answer 2

I find a solution from github issue thread after google. You only need to do is to install postcss@8 with npm install.

Helminthic