plugin.includes is not a function error when formatting document

[NateXVI]

Describe the bug

After updating to Svelte for VS Code version 107.9.0, code formatting is no longer working with prettier.config.cjs.

Reproduction

1. Clone the repo

git clone https://github.com/NateXVI/plugin-includes-error.git
cd plugin-includes-error

2. Install packages

npm i

3. Open VS Code

code .

4. Install Svelte for VS Code extension version 107.9.0

5. Mess up the formatting on src/routes/+page.svelte

6. Format src/routes/+page.svelte
   Shift + Alt + F

Expected behaviour

src/routes/+page.svelte should be formatted

System Info

• OS: Windows 11
• IDE: VS Code

Which package is the issue about?

svelte-language-server

Additional Information, eg. Screenshots

The error seems to be cause by changes made in #2100 and only happens when using a prettier.config.cjs instead of .prettierrc config file.

Svelte extension output I get when formatting

TypeError: plugin.includes is not a function
    at c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:126:49
    at Array.some (<anonymous>)
    at hasSveltePluginLoaded (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:126:25)
    at importFittingPrettier (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:62:40)
    at async SveltePlugin.formatDocument (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:73:50)
    at async PluginHost.tryExecutePlugin (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:342:20)
    at async Promise.all (index 0)
    at async PluginHost.execute (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:319:24)
    at async PluginHost.formatDocument (c:\Users\nated\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:114:38)
Initialize new ts service at  
Trying to load configs for c:\Users\nated\OneDrive\Documents\test\plugin-includes-error

[dimfeld]

This isn't directly related to using a .cjs file vs. .prettierrc, but happens when plugins uses require to load the plugin instead of a string.

https://github.com/NateXVI/plugin-includes-error/blob/36e767ec36b3d2d770d2867420e1e8f7bd01a219/prettier.config.cjs#L6

[techniq]

I was able to work around this issue by switching back to using string package names for plugins...

module.exports = {
  plugins: [
    'prettier-plugin-svelte',
    'prettier-plugin-tailwindcss',
  ],
  ...
}

but then I was getting...

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /Users/techniq/Documents/Development/carevoyance/code/apps/web/node_modules/prettier-plugin-svelte/package.json
    at new NodeError (node:internal/errors:387:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:464:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:748:3)
    at resolveExports (node:internal/modules/cjs/loader:500:36)
    at Module._findPath (node:internal/modules/cjs/loader:540:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:996:27)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackageInfo (/Users/techniq/.vscode/extensions/svelte.svelte-vscode-107.9.0/node_modules/svelte-language-server/dist/src/importPackage.js:30:37)
    at SveltePlugin.formatDocument (/Users/techniq/.vscode/extensions/svelte.svelte-vscode-107.9.0/node_modules/svelte-language-server/dist/src/plugins/svelte/SveltePlugin.js:77:48)
    at async PluginHost.tryExecutePlugin (/Users/techniq/.vscode/extensions/svelte.svelte-vscode-107.9.0/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:342:20) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'

the workaround was to add "./package.json": "./package.json" in prettier-plugin-svelte's package.json (monkey patched in node_modules), which now allows prettier to work in VSCode again.

I'll do some more testing, and if looks like the correct fix, I'll send a PR to update the package.json in prettier-plugin-svelte.

[joelmukuthu]

This (i.e. the original issue "plugin.includes is not a function") is also an issue for projects using yarn berry (and workspaces) since yarn requires that all modules used inside a workspace be declared in the workspace's package.json file.

When the plugins option is configured as 'prettier-plugin-svelte', formatting files inside a workspace with VS Code fails because yarn tries to require the plugin at the time of formatting, expecting to find it in the workspace's package.json. But when it's configured as require('prettier-plugin-svelte'), the require is evaluated in the context of the .prettierrc file, which would be in the project's root directory, where you'd typically add prettier-plugin-svelte as a devDependency.

The workaround is to add prettier-plugin-svelte as a devDependency to all workspaces but that's not very ideal.

EDIT: a better workaround is to configure plugins as require.resolve('prettier-plugin-svelte') instead and this is actually highlighted in the README.