💡
StylelintでCSS-in-JSをlintする時にハマったこと
ハマったポイント
Next.jsのアプリを作ってる時にStylelintとStorybookを同時に入れたら下のようなエラーが出た。
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)
結論
package.jsonに次の内容を足す。
{
"resolutions": {
"stylelint/postcss": "8.4.14"
}
}
※ resolutions
はyarn
でしかサポートされていない機能なので、npm
を使っている場合はnpm-force-resolutions
などを使う必要がある。
解説(?)
イマイチわかってないが、postcss-syntax
とpostcss
のバージョン不整合が問題っぽい?
2022年9月19日時点の最新のstylelint
はpostcss@^8.4.16
に依存しているが、これを8.4.14
に変えると動くらしい。stylelint
に依存しているpostcss
のバージョンをresolutions
を使って強制的に8.4.14
に固定している。
なぜStorybookを入れたらエラーが起こったのかは謎。
参考
Discussion