Search code examples
angularsassstylelint

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

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.

Solution

  • 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"
}