DOMError when in PNPM package and using prettier plugin #3903
Description
Preflight Checklist
- I have read the troubleshooting guide
- I have searched existing issues and this is not a duplicate
- This is a bug with the VS Code extension, not with how Prettier formats code
Issue Summary
Prettier VSCode extension fails with an exception when run in a PNPM project, and prettier config has at least one plugin.
This is a follow up on #3036 and #3037 which were closed without a fix
Reproduction Repository
https://github.com/maxpatiiuk/pnpm-prettier-vscode
Steps to Reproduce
-
Clone repository
git clone https://github.com/maxpatiiuk/pnpm-prettier-vscode cd pnpm-prettier-vscode -
Run PNPM install:
pnpm i
-
Open VSCode and go to the "Output" tab.
Open ./README.md then switch to ./test.ts.
See exception in the console.
Also, file is not formatted on save.
Comment out the plugin in prettier.config.js and restart vscode - the error is gone.
Expected Behavior
No exception
Actual Behavior
Code is not reformated. VSCode Output for Prettier plugin contains:
["INFO" - 5:55:51 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 5:55:51 PM] Extension Version: 11.0.2.
["DEBUG" - 5:55:51 PM] Enabling Prettier globally
{
"languageSelector": [
{
"language": "javascript"
},
{
"language": "mongo"
},
{
"language": "javascriptreact"
},
{
"language": "typescript"
},
{
"language": "typescriptreact"
},
{
"language": "json"
},
{
"language": "jsonc"
},
{
"language": "json5"
},
{
"language": "css"
},
{
"language": "postcss"
},
{
"language": "less"
},
{
"language": "scss"
},
{
"language": "handlebars"
},
{
"language": "graphql"
},
{
"language": "markdown"
},
{
"language": "mdx"
},
{
"language": "html"
},
{
"language": "vue"
},
{
"language": "yaml"
},
{
"language": "ansible"
},
{
"language": "home-assistant"
},
{
"language": "jsonc",
"scheme": "vscode-userdata"
}
],
"rangeLanguageSelector": [
{
"language": "javascript"
},
{
"language": "javascriptreact"
},
{
"language": "typescript"
},
{
"language": "typescriptreact"
},
{
"language": "json"
},
{
"language": "jsonc"
},
{
"language": "graphql"
}
]
}
["DEBUG" - 5:55:55 PM] Local prettier module path: /Users/mak13180/s/e/pnpm-prettier-vscode/node_modules/prettier/index.cjs
["DEBUG" - 5:55:55 PM] Using prettier version 3.8.0
["INFO" - 5:55:55 PM] Using config file at /Users/mak13180/s/e/pnpm-prettier-vscode/prettier.config.js
["ERROR" - 5:55:55 PM] Error handling text editor change
["ERROR" - 5:55:55 PM] function({ filepath }) {
const basename = path.basename(filepath);
return basename === ".env" || ba...<omitted>... } could not be cloned.
DataCloneError: function({ filepath }) {
const basename = path.basename(filepath);
return basename === ".env" || ba...<omitted>... } could not be cloned.
at new DOMException (node:internal/per_context/domexception:76:18)
at p (/Users/mak13180/Documents/code/code-portable-data/extensions/esbenp.prettier-vscode-11.0.2/dist/worker/prettier-instance-worker.js:37:22)
at /Users/mak13180/Documents/code/code-portable-data/extensions/esbenp.prettier-vscode-11.0.2/dist/worker/prettier-instance-worker.js:60:75It seems to be trying to serialize an Error object to pass it from the worker to the main thread and fails.
When I resolve that bug by updating the extension source code to wrap the error object in a String() to make it serializable, I get the actual cause:
TypeError: Cannot read properties of undefined (reading 'forEach')
at t.default.getSelectors (/Users/mak13180/Documents/code/code-portable-data/extensions/esbenp.prettier-vscode-11.0.2/dist/extension.js:640:19)
at async t.default.handleActiveTextEditorChanged (/Users/mak13180/Documents/code/code-portable-data/extensions/esbenp.prettier-vscode-11.0.2/dist/extension.js:604:27)Which happens here in the source code:
prettier-vscode/src/PrettierEditService.ts
Line 398 in 49528d4
Operating System
macOS
VS Code Version
1.108.0
Prettier Extension Version
11.0.2
Prettier Version
3.8.0
Prettier Extension Logs
ATTACHED ABOVE
Prettier Configuration
export default {
plugins: [
"prettier-plugin-sh",
],
};