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

karlhorky · 2024-02-05T16:56:11Z

Summary

The Prettier VS Code extension (esbenp.prettier-vscode@10.1.0) currently crashes when:

no prettier dependency installed in package.json
"type": "module" in package.json
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:

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'
          )

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) Use Prettier 3.0 by default #3069
PR (reverted) ad1d008

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: esbenp.prettier-vscode@10.1.0

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

The text was updated successfully, but these errors were encountered:

karlhorky · 2024-02-05T16:56:25Z

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) Use Prettier 3.0 by default #3069
PR (reverted) ad1d008

...and Prettier v2 (prettier@2.8.8) 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/prettier@2.8.8/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/prettier@2.8.8/node_modules/prettier/third-party.js to a dynamic import() which is available in all CommonJS modules.

karlhorky · 2024-02-05T16:56:33Z

Workaround

Add Prettier v3 to your dependencies in every project 😬

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

karlhorky · 2024-02-05T16:57:30Z

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 · 2024-03-27T21:31:06Z

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):

pnpm add -g prettier
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 · 2024-04-01T06:52:23Z

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.
{}

This was referenced Feb 5, 2024

Switch .mjs to .js upleveled/eslint-config-upleveled#331

Closed

Cannot use import in prettier.config.js with Prettier v3 and ESM #3066

Open

karlhorky changed the title ~~Crash when using ESM prettier.config.js without prettier dependency in package.json~~ Crashes with ESM prettier.config.js w/out prettier dependency in project Feb 5, 2024

This was referenced Feb 5, 2024

VS Code Prettier extension version 10.1.0 conflicts with Prettier v3 in Preflight upleveled/preflight#429

Closed

Install prettier during config install, switch prettier.config.mjs to prettier.config.js upleveled/eslint-config-upleveled#332

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

karlhorky commented Feb 5, 2024 •

edited

karlhorky commented Feb 5, 2024

karlhorky commented Feb 5, 2024

karlhorky commented Feb 5, 2024

noelforte commented Mar 27, 2024

aminya commented Apr 1, 2024

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

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

Comments

karlhorky commented Feb 5, 2024 • edited

Summary

Github Repository to Reproduce Issue

Steps To Reproduce:

Expected result

Actual result

Additional information

Prettier Log Output

karlhorky commented Feb 5, 2024

Cause

karlhorky commented Feb 5, 2024

Workaround

karlhorky commented Feb 5, 2024

Fix

noelforte commented Mar 27, 2024

aminya commented Apr 1, 2024

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

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

karlhorky commented Feb 5, 2024 •

edited