An error “Cannot read properties of undefined (reading ‘stringify’)” occurred in postcss-syntax when I set up storybook

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

  1. set up Next.js app npx create-next-app@latest storybook-with-stylelint-test --ts
  2. install stylelint and plugins yarn add -D stylelint @stylelint/postcss-css-in-js postcss-syntax
  3. 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}'",
  },
  ...
}
  1. set up storybook npx sb init --builder webpack5
  2. run stylelint yarn stylelint
  3. 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.

people found this article helpful. What about you?