Cannot resolve custom syntax module "postcss-scss"

[spaceninja]

I upgraded my Stylelint config to use Stylelint 14 and switched from stylelint-scss to stylelint-config-standard-scss, but now all the tests for my plugin failed with the following warning.

If I remove stylelint-config-standard-scss then everything works, but I would like to continue supporting sass files in my config.

Any ideas how I can resolve this?

Cannot resolve custom syntax module "postcss-scss". Check that module "postcss-scss" is available and spelled correctly.

at getCustomSyntax (node_modules/stylelint/lib/getPostcssResult.js:97:10)
at getPostcssResult (node_modules/stylelint/lib/getPostcssResult.js:41:5)
at lintSource (node_modules/stylelint/lib/lintSource.js:76:20)
at Function.standalone [as lint] (node_modules/stylelint/lib/standalone.js:132:26)

My PR can be seen here: spaceninja/stylelint-config-spaceninja#171

The failing tests are here: https://github.com/spaceninja/stylelint-config-spaceninja/runs/3970823065?check_suite_focus=true

[wengjincheng]

I have the same error.

[niksy]

I think this is related to Stylelint core custom syntax handling.

Stylelint tries to resolve custom syntax location (https://github.com/stylelint/stylelint/blob/main/lib/getPostcssResult.js#L95) but uses Node require algorithm, so it search from that file upwards.

If you have dependancy tree where postcss-scss is not in one of the root directories, but is nested inside this config’s node_modules (it happens if you have different versions of same package), path resolution fails.

Easy fix should be to install postcss-scss as your project dependancy so it can be placed inside root node_modules, but configs are meant to be self contained, otherwise we would have situation like long standing ESLint "bug".

@jeddy3 how can this be resolved? Should require take some context? Or should postcss-scss be peer dependancy?

[middric]

If you have dependancy tree where postcss-scss is not in one of the root directories, but is nested inside this config’s node_modules (it happens if you have different versions of same package), path resolution fails.

I still get the same error even with postcss-scss defined as a dev dependency (and its at the root of node_modules):

"devDependencies": {
    "@babel/core": "7.15.8",
    "@babel/preset-env": "7.15.8",
    "@babel/preset-typescript": "7.15.0",
    "@digitalroute/cz-conventional-changelog-for-jira": "6.6.0",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@nuxt/types": "2.15.8",
    "@nuxt/typescript-build": "2.1.0",
    "@nuxtjs/eslint-config-typescript": "6.0.1",
    "@nuxtjs/eslint-module": "3.0.2",
    "@nuxtjs/fontawesome": "1.1.2",
    "@nuxtjs/stylelint-module": "4.0.0",
    "@semantic-release/git": "10.0.0",
    "@storybook/addon-actions": "6.3.12",
    "@storybook/addon-essentials": "6.3.12",
    "@storybook/addon-knobs": "6.3.1",
    "@storybook/addon-links": "6.3.12",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/vue": "6.3.12",
    "@types/aws-lambda": "8.10.84",
    "@types/dompurify": "2.3.1",
    "@types/jest": "27.0.2",
    "@vue/test-utils": "1.2.2",
    "autoprefixer": "10.3.7",
    "axios-mock-adapter": "1.20.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "27.3.1",
    "babel-loader": "8.2.3",
    "css-loader": "5.2.7",
    "cz-conventional-changelog": "3.3.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-nuxt": "2.0.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-vue": "7.20.0",
    "file-loader": "6.2.0",
    "generate-template-files": "3.2.0",
    "graphql": "15.6.1",
    "graphql-tag": "2.12.5",
    "jest": "27.3.1",
    "jest-transform-graphql": "2.1.0",
    "mini-css-extract-plugin": "1.6.2",
    "multi-semantic-release": "2.9.1",
    "node-sass": "6.0.1",
    "oao": "2.0.2",
    "postcss-scss": "^4.0.1",
    "prettier": "2.4.1",
    "resolve-url-loader": "4.0.0",
    "sass-loader": "10.2.0",
    "semantic-release": "18.0.0",
    "serverless-offline": "8.2.0",
    "serverless-plugin-monorepo": "0.10.0",
    "serverless-s3-deploy": "0.10.1",
    "stylelint": "14.0.0",
    "stylelint-config-prettier": "9.0.3",
    "stylelint-config-standard": "23.0.0",
    "stylelint-config-standard-scss": "^2.0.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-jest": "27.0.7",
    "ts-loader": "8.3.0",
    "typescript": "4.4.4",
    "vue-jest": "3.0.7",
    "vue-loader": "15.9.8",
    "vue-server-renderer": "2.6.14",
    "vue-template-compiler": "2.6.14",
    "webpack": "4.46.0",
    "webpack-bundle-analyzer": "4.5.0",
    "webpack-cli": "4.9.1",
    "webpack-graphql-loader": "1.0.2"
  },

[niksy]

Hm, that’s weird. Can you provide directory listing of your node_modules? Recreating this issue with postcss-scss inside root directory works fine.

[middric]

Sure! https://gist.github.com/middric/d0cf67c0f5392bd9ef5a9a98aeda7837

[middric]

Should clarify this is a yarn workspaces project, but stylelint is installed and executed from the root of the project, not inside a specific workspace

[niksy]

Can you apply changes from this commit to your local Stylelint? I’m preparing issue and PR for Stylelint and when I apply this change everything works.

[middric]

> yarn run stylelint **/*.{css,sass,scss}
Error: Cannot resolve custom syntax module "/home/rich/Workspace/rv-nuxt-monorepo/node_modules/postcss-scss/lib/scss-syntax.js". Check that module "/home/rich/Workspace/rv-nuxt-monorepo/node_modules/postcss-scss/lib/scss-syntax.js" is available and spelled correctly.
    at getCustomSyntax (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/getPostcssResult.js:97:10)
    at getPostcssResult (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/getPostcssResult.js:41:5)
    at lintSource (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/lintSource.js:76:20)
    at async /home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/standalone.js:218:27
    at async Promise.all (index 5)
    at async standalone (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/standalone.js:257:22)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

File does exist though:

> cat "/home/rich/Workspace/rv-nuxt-monorepo/node_modules/postcss-scss/lib/scss-syntax.js"
let stringify = require('./scss-stringify')
let parse = require('./scss-parse')

module.exports = { parse, stringify }

[niksy]

And what about running with npm instead of Yarn?

[middric]

Same:

> npx stylelint **/*.scss
Error: Cannot resolve custom syntax module "/home/rich/Workspace/rv-nuxt-monorepo/node_modules/postcss-scss/lib/scss-syntax.js". Check that module "/home/rich/Workspace/rv-nuxt-monorepo/node_modules/postcss-scss/lib/scss-syntax.js" is available and spelled correctly.
    at getCustomSyntax (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/getPostcssResult.js:97:10)
    at getPostcssResult (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/getPostcssResult.js:41:5)
    at lintSource (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/lintSource.js:76:20)
    at async /home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/standalone.js:218:27
    at async Promise.all (index 1)
    at async standalone (/home/rich/Workspace/rv-nuxt-monorepo/node_modules/stylelint/lib/standalone.js:257:22)

> npm -v
6.14.15
> node -v
v14.17.6

[niksy]

That’s really weird… Can you log error inside catch block in stylelint/lib/getPostcssResult.js so we can see what actually is caught? Maybe it’s some permission issue?

I’ve just tried running tests with Yarn and everything works OK.

try {
  resolved = require(customSyntax);
} catch (error) {
  console.log(error);
  throw new Error(
    `Cannot resolve custom syntax module "${customSyntax}". Check that module "${customSyntax}" is available and spelled correctly.`
  );
}

[middric]

It seems the issue is that I have other dependencies which require postcss 7. Heres a repo with the bare minimum set up to manifest the problem: https://github.com/middric/stylelint-test/ Remove this line https://github.com/middric/stylelint-test/blob/master/package.json#L12 and everything works

[niksy]

Ah, yes, and error is probably something not related to unresolved path, but rather something with syntax and API changes in PostCSS 8. postcss-scss used in this config expects PostCSS 8 as peer dependancy.

[niksy]

I’ve opened PR and issue in Stylelint repository.

[ybiquitous]

Hi there, now I am looking into this problem. Maybe, the cause may be requiring an old PostCSS module postcss@7.0.39, instead of postcss@8.3.11:

$ yarn list --pattern postcss
yarn list v1.22.17
├─ postcss-media-query-parser@0.2.3
├─ postcss-resolve-nested-selector@0.1.1
├─ postcss-safe-parser@6.0.0
├─ postcss-scss@4.0.1
├─ postcss-selector-parser@6.0.6
├─ postcss-sorting@5.0.1
├─ postcss-value-parser@4.1.0
├─ postcss@7.0.39
└─ stylelint@14.0.0
   └─ postcss@8.3.11

EDIT: The dependencies above is on spaceninja/stylelint-config-spaceninja#171

[ybiquitous]

I've created PR stylelint/stylelint#5635 to clarify this error. If you install the PR version of Stylelint, you can see the real error:

$ git clone https://github.com/spaceninja/stylelint-config-spaceninja.git
$ cd stylelint-config-spaceninja
$ git switch renovate/stylelint-14.x
$ yarn add --dev github:stylelint/stylelint#better-error-handling-for-module-not-found
$ yarn test
...
TypeError: Class extends value undefined is not a constructor or null
  at Object.<anonymous> (node_modules/postcss-scss/lib/nested-declaration.js:3:33)
  at Object.<anonymous> (node_modules/postcss-scss/lib/scss-parser.js:4:25)
...

You can resolve this error by installing PostCSS 8:

$ yarn add --dev postcss
$ yarn test
...
Test Suites: 1 failed, 1 total
Tests:       2 failed, 7 passed, 9 total
...

[mioxs]

same problem

[efoken]

Had the same issue in a yarn workspaces project. As mentioned the problem was caused by a module depending on PostCSS@7. I used yarn why postcss to check and found the following lines:

=> Found "resolve-url-loader#postcss@7.0.36"
info This module exists because "_project_#create-react-app#react-scripts#resolve-url-loader" depends on it.
info Disk size without dependencies: "684KB"
info Disk size with unique dependencies: "1.55MB"
info Disk size with transitive dependencies: "1.67MB"
info Number of shared dependencies: 7

So I added the following to my root package.json:

"resolutions": {
  "postcss": "^8.3.11"
},

After running yarn install again the issue was gone. Stylelint runs with no problem and also my create-react-app workspace still runs without problems.

[niksy]

This is likely caused by an incompatible version of PostCSS in the tree. If you still need PostCSS 7 as root dependancy, I suggest to upgrade all related dependencies to use PostCSS 8 before upgrading Stylelint and related configurations and plugins.

[kirillgroshkov]

Yeah, my projects that use either latest Vuetify or Nuxt all are "stuck" with PostCSS@7 and that's not gonna change soon.

Yes, there are alpha/beta versions of newer versions, but it might take years until they go GA and we can use PostCSS@8 there.

Ended up disabling stylelint for now :(

[monsieurnebo]

Same issue over here while updating to Stylelint 14.

[KyorCode]

Still having "When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option" after getting everything to the latest version.