Crashes with ESM `prettier.config.js` w/out `prettier` dependency in project

[karlhorky]

Summary

The Prettier VS Code extension ([email protected]) currently crashes when:

1. no prettier dependency installed in package.json
2. "type": "module" in package.json
3. prettier.config.js with ESM

Github Repository to Reproduce Issue

Reproduction repo: https://github.com/karlhorky/prettier-vscode-10-1-0-esm-crash

Steps To Reproduce:

1. Clone the reproduction repo above (or copy the code below into new files) package.json

   {
     "type": "module",
     "main": "index.js"
   }
   

   prettier.config.js

   const config = {};
   export default config;
   

   index.js

       console.log(
     'abc'
             )
   

2. Try to format index.js using the VS Code Prettier extension

Expected result

Formatting should work

Actual result

The extension crashes (see text log at bottom of issue):

This is because the VS Code extension uses the old Prettier v2 internally - because the PR from @sosukesuzuki upgrading to Prettier v3 by default was reverted:

• PR (merged) https://github.com/prettier/prettier-vscode/pull/3069
• PR (reverted) https://github.com/prettier/prettier-vscode/commit/ad1d008ff81a5a85b783e3016ad136e88d149abf

Additional information

Feel free to attach a screenshot.

VS Code Version:

Version: 1.86.0 Commit: 05047486b6df5eb8d44b2ecd70ea3bdf775fd937 Date: 2024-01-31T10:29:11.933Z Electron: 27.2.3 ElectronBuildId: 26495564 Chromium: 118.0.5993.159 Node.js: 18.17.1 V8: 11.8.172.18-electron.0 OS: Darwin arm64 23.3.0

Prettier Extension Version: [email protected]

OS and version: macOS Sonoma 14.3 (23D56)

Prettier Log Output

["INFO" - 5:28:43 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 5:28:43 PM] Extension Version: 10.1.0.
["INFO" - 5:28:53 PM] Formatting file:///Users/k/p/prettier-vscode-10-1-0-esm-crash/index.js
["ERROR" - 5:28:53 PM] Error resolving prettier configuration for /Users/k/p/prettier-vscode-10-1-0-esm-crash/index.js
["ERROR" - 5:28:53 PM] require() of ES Module /Users/k/p/prettier-vscode-10-1-0-esm-crash/prettier.config.js from /Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js not supported.
Instead change the require of prettier.config.js in /Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/k/p/prettier-vscode-10-1-0-esm-crash/prettier.config.js from /Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js not supported.
Instead change the require of prettier.config.js in /Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js to a dynamic import() which is available in all CommonJS modules.
    at Function.<anonymous> (node:electron/js2c/asar_bundle:2:13327)
    at l._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:173:5635)
    at r._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:170:29791)
    at t._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:135:35292)
    at Module.patchedRequire [as require] (/Users/k/.vscode/extensions/github.copilot-1.156.0/dist/extension.js:104:43169)
    at module2.exports (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:83:61)
    at loadJs2 (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8050:22)
    at Explorer.loadFileContent (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8449:36)
    at Explorer.createCosmiconfigResult (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8453:40)
    at Explorer.loadSearchPlace (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8438:35)
    at async Explorer.searchDirectory (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8428:31)
    at async run (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8413:26)
    at async Explorer.search (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/third-party.js:8407:24)
    at async Object.resolveConfigFile (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/node_modules/prettier/index.js:18499:22)
    at async t.ModuleResolver.resolveConfig (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:6697)
    at async t.ModuleResolver.getResolvedConfig (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:7529)
    at async t.default.format (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:14563)
    at async t.PrettierEditProvider.provideEdits (/Users/k/.vscode/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:12672)
    at async z.provideDocumentFormattingEdits (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:150:93866)

cc @ntotten

[karlhorky]

Cause

This is because the VS Code extension uses the old Prettier v2 internally - because the PR from @sosukesuzuki upgrading to Prettier v3 by default was reverted:

• PR (merged) https://github.com/prettier/prettier-vscode/pull/3069
• PR (reverted) https://github.com/prettier/prettier-vscode/commit/ad1d008ff81a5a85b783e3016ad136e88d149abf

...and Prettier v2 ([email protected]) also breaks with a similar error:

$ pnpm prettier --version      
2.8.8
$ pnpm prettier index.js --write                  
[error] Invalid configuration file `index.js`: require() of ES Module /Users/k/p/prettier-vscode-10-1-0-esm-crash/prettier.config.js from /Users/k/p/prettier-vscode-10-1-0-esm-crash/node_modules/.pnpm/[email protected]/node_modules/prettier/third-party.js not supported.
[error] Instead change the require of prettier.config.js in /Users/k/p/prettier-vscode-10-1-0-esm-crash/node_modules/.pnpm/[email protected]/node_modules/prettier/third-party.js to a dynamic import() which is available in all CommonJS modules.

[karlhorky]

Workaround

Add Prettier v3 to your dependencies in every project 😬

{
  "type": "module",
  "main": "index.js",
  "dependencies": {
+    "prettier": "3.2.5"
  }
}

[karlhorky]

Fix

@ntotten would you accept a new PR upgrading to Prettier v3 by default again in the Prettier VS Code extension?

Prettier v2 is pretty old now (April 2023) and the alphas of Prettier v4 are dropping now...

[noelforte]

Just ran across this myself and thought to check the GH issues— @karlhorky instead of using a local dependency in every project there is another temporary solution that I was able to use: install prettier globally and point the VSCode extension to that (latest) version instead:

My steps were as follows (adjust for your setup of course):

1. pnpm add -g prettier
2. In your (global or local) settings.json:

{
  "prettier.prettierPath": "<path-to-pnpm-store>/node_modules/prettier"
}

Reloaded and everything ran sucessfully, hope this works for you and anyone else that stumbles across this bug until v3/v4 gets added!

[aminya]

I tried all of these settings, but none work.

Here's my prettier.config.mjs

import config from "prettier-config-atomic"
export default config

And there's the log

["ERROR" - 23:48:15] Invalid prettier configuration file detected.
{}

[ntotten]

@karlhorky Yes, absolutely. We do support prettier 3.0.0 when installed in the project, but not out of the box. We actually did release a version with 3.0.0, but it broke so we reverted and nobody has time to get back to it. Here is the revert if you want to use that as a starting point: https://github.com/prettier/prettier-vscode/commit/ad1d008ff81a5a85b783e3016ad136e88d149abf

I suspect it is pretty close, just need somebody to get it over the finish.