Issue

This Content is from Stack Overflow. Question asked by cp20

I want to set up a repository that uses storybook and stylelint, but got the error below.

TypeError: Cannot read properties of undefined (reading 'stringify')
    at Function.stringify (#####/node_modules/postcss-syntax/stringify.js:8:38)
    at MapGenerator.generate (#####/node_modules/stylelint/node_modules/postcss/lib/map-generator.js:323:12)
    at LazyResult.stringify (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.runAsync (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:443:17)
    at LazyResult.async (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:206:17)

How to reproduce the bug

set up Next.js app npx create-next-app@latest storybook-with-stylelint-test --ts
install stylelint and plugins yarn add -D stylelint @stylelint/postcss-css-in-js postcss-syntax
set up stylelint

.stylelintrc.js

module.exports = {
  overrides: [
    {
      files: ['**/*.{js,jsx,ts,tsx}'],
      customSyntax: '@stylelint/postcss-css-in-js',
    },
    rules: {
      'string-quotes': ['single'],
    },
  ],
};

package.json

{
  ...
  "scripts": {
    ...
    "stylelint": "stylelint --ignore-path .gitignore './**/*.{css,scss,ts,tsx}'",
  },
  ...
}

set up storybook npx sb init --builder webpack5
run stylelint yarn stylelint
the error occured

Here is the repository that reproduces the bug: https://github.com/cp-20/storybook-with-stylelint-test

How can I fix this?

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.