TypeError: Class extends value undefined is not a constructor or null

[ayjee]

I am upgrading to stylelint v14, and moving from stylelint-config-standard to stylelint-config-standard-scss. When I attempt to run stylelint I get the following error, which I can only reproduce with stylelint-config-standard-scss:

 $ stylelint --config stylelint.config.js 'app/assets/stylesheets/**/*.{scss,css}' 'api/assets/**/*.{scss,css}' --fix
TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/ayjee/work/repos/test-repo/node_modules/postcss-scss/lib/nested-declaration.js:3:33)
    at Module._compile (/Users/ayjee/work/repos/test-repo/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (/Users/ayjee/work/repos/test-repo/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/ayjee/work/repos/test-repo/node_modules/postcss-scss/lib/scss-parser.js:4:25)
    at Module._compile (/Users/ayjee/work/repos/test-repo/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
error Command failed with exit code 1.

Any idea as to what might be causing this issue? Here is my config file:

// stylelint.config.js

'use strict';

module.exports = {
  extends: [`stylelint-config-standard-scss`],
  rules: {
    'string-quotes': `double`,
  },
};

[ivanlori]

same for me, any suggestion? 😕

[Ev1ch]

I have the same issue

[niksy]

Can you provide minimal reproducible test case?

[ayjee]

@niksy I tried to post that in my original comment. Is there something else you would like to see?

[niksy]

@ayjee we need whole directory and package structure so we’re sure there isn’t any conflicting dependencies and things like that.

[michalkopanski]

@niksy are there any known conflicting dependencies? I'm having the same issue as well.

[Ev1ch]

Can you provide minimal reproducible test case?

Of course.

Developing dependencies:

"devDependencies": { "eslint": "^7.11.0", "eslint-plugin-react": "^7.26.1", "lint-staged": "^11.2.6", "prettier": "^2.4.1", "stylelint": "^14.0.1", "stylelint-config-standard-scss": "^2.0.1" },

Main dependencies:

"dependencies": { "@testing-library/jest-dom": "^5.15.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "clsx": "^1.1.1", "node-sass": "^6.0.1", "normalize-scss": "^7.0.1", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" },

.stylelintrc:

{ "extends": "stylelint-config-standard-scss" }

That's all, to be true. I was impressed, because it is the most standard setup I can imagine. I was thinking about node-sass package. Maybe it is too new or something

[niksy]

This is related to how npm installs and flattens dependencies. postcss-scss expects postcss as peer dependancy, and since you didn’t install it yourself, and most of other dependencies use postcss@7, that version is placed at root of node_modules, but our postcss-scss needs postcss@8.

Here are possible fixes:

• Install postcss@8 as your project dependancy so postcss-scss can pick that as top-level postcss
• Update all other related packages which use postcss@7 to versions where postcss@8 is expected

[ayjee]

This seems to fix it for me @niksy. Thanks so much!

[stephenjason89]

@niksy Thank you

yarn add -D postcss@8
did the trick

[toffyui]

@niksy Thank you. You saved me so much time!

[dcwarwick]

@niksy thanks for this -- I encountered this while upgrading stylelint and the error message is supremely non-obvious!

Slight variation in my situation: bit monorepo, and there are various dependencies at various levels some of which pull in postcss v7 and some v8, and lerna was hosting the v7 as chance would have it. Adding postcss@8 to the top-level package.json resolves. Many thanks.

[danielgroen]

@niksy Thank you

yarn add -D postcss@8 did the trick

I am using Nuxt 2 and Webpack
This works for me. however when i add postcss i got a dozen warnings of:

To fix this:
add the following to your nuxt.conf.js:

build: {
    postcss: null
}

[12914hh]

Thank you so much. I take all night to resolve this problem。 thanks! QAQ