TypeError: Cannot read property 'append' of undefined
jinusean opened this issue · 3 comments
What version of stylelint
, prettier
and stylelint-prettier
are you using?
"devDependencies": {
"prettier": "^1.15.2",
"stylelint": "^9.8.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-prettier": "^1.0.5"
}
Please paste any applicable config files that you're using (e.g. .prettierrc
or .stylelintrc
files)
{
"extends": [
"stylelint-prettier/recommended"
]
}
What source code are you linting?
Any vue file.
What did you expect to happen?
To format/lint the file.
What actually happened?
TypeError: Cannot read property 'append' of undefined
at Document.append (/Users/Suah/WebstormProjects/asdf/node_modules/postcss-syntax/document.js:16:13)
at /Users/Suah/WebstormProjects/asdf/node_modules/stylelint-prettier/stylelint-prettier.js:139:14
at Promise.resolve.then (/Users/Suah/WebstormProjects/asdf/node_modules/stylelint/lib/lintSource.js:230:9)
at <anonymous>
{
"plugins": ["stylelint-prettier"],
"extends": [
"stylelint-config-prettier"
],
"rules": {
}
}
This .stylelintrc
setting works, however the error message comes up once "prettier/prettier": true
is inserted to the rules.
I've not delved into this but I suspect this is a similar issue to prettier/eslint-plugin-prettier#81. Prettier would try to use the Vue parser for vue files, but stylelint has extracted just the style block out.
What happens if you add some config to force the prettier invoked by stylelint to always use the css parser? Modify your .stylelintrc like so:
{
"plugins": ["stylelint-prettier"],
"extends": [
"stylelint-config-prettier"
],
"rules": {
"prettier/prettier": [true, {"parser": "css"}]
}
}
#22 changes stylelint-prettier so we skip trying to format sections of code within vue style blocks with prettier. You're almost certainly about to run prettier over the whole file anyway so duplicating that linting work feels pointless.
Try stylelint-prettier v1.1.0 which contains that fix.