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

risu729 · 2023-07-07T04:04:54Z

Summary

Format fails if prettier.config.js is written in ESM and contains import for plugins.

Github Repository to Reproduce Issue

https://github.com/risu729/prettier-test

Steps To Reproduce:

Create prettier.config.js with {"type": "module"} containing import like below.

import organizeImports from "prettier-plugin-organize-imports";

export default {
  plugins: [organizeImports],
};

Run format for a file.

Expected result

Format the file successfully.

Actual result

Failed with error: Error resolving prettier configuration for $path
However, npm exec prettier --write . runs successfully.

If I change the filename to prettier.config.mjs, regardless of type in package.json, prettier fails.

Additional information

VS Code Version:
Version: 1.81.0-insider (user setup)
Commit: 79ec05cb73486ad2d57a57a5f138b094d21c8644
Date: 2023-07-06T23:18:22.645Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.23493

Prettier Extension Version: 9.19.0

OS and version: Windows 11 Home Insider Preview 22H2

Prettier Log Output

For prettier.config.js,

["INFO" - 1:01:56 PM] Formatting file:///c%3A/Users/taku/Documents/GitHub/prettier-test/prettier.config.js
["DEBUG" - 1:01:56 PM] Local prettier module path: 'c:\Users\taku\Documents\GitHub\prettier-test\node_modules\prettier\index.cjs'
["ERROR" - 1:01:56 PM] Error resolving prettier configuration for c:\Users\taku\Documents\GitHub\prettier-test\prettier.config.js
["ERROR" - 1:01:56 PM] require() of ES Module c:\Users\taku\Documents\GitHub\prettier-test\prettier.config.js from C:\Users\taku\Documents\GitHub\prettier-test\node_modules\.pnpm\[email protected]\node_modules\prettier\internal\internal.mjs not supported.
Instead change the require of prettier.config.js in C:\Users\taku\Documents\GitHub\prettier-test\node_modules\.pnpm\[email protected]\node_modules\prettier\internal\internal.mjs to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module c:\Users\taku\Documents\GitHub\prettier-test\prettier.config.js from C:\Users\taku\Documents\GitHub\prettier-test\node_modules\.pnpm\[email protected]\node_modules\prettier\internal\internal.mjs not supported.
Instead change the require of prettier.config.js in C:\Users\taku\Documents\GitHub\prettier-test\node_modules\.pnpm\[email protected]\node_modules\prettier\internal\internal.mjs to a dynamic import() which is available in all CommonJS modules.
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at module.exports (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:173:34)
    at loadJsSync2 (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5394:22)
    at loadJs2 (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5404:16)
    at async Explorer.loadFileContent (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5763:18)
    at async Explorer.createCosmiconfigResult (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5770:29)
    at async Explorer.loadSearchPlace (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5752:16)
    at async Explorer.searchDirectory (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5742:31)
    at async run (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5728:26)
    at async Explorer.search (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/internal/internal.mjs:5723:16)
    at async Module.resolveConfigFile (file:///C:/Users/taku/Documents/GitHub/prettier-test/node_modules/.pnpm/[email protected]/node_modules/prettier/index.mjs:20333:18)

For prettier.config.mjs, the error object seems empty.

["INFO" - 2:29:40 PM] Formatting file:///c%3A/Users/taku/Documents/GitHub/prettier-test/prettier.config.mjs
["DEBUG" - 2:29:40 PM] Local prettier module path: 'c:\Users\taku\Documents\GitHub\prettier-test\node_modules\prettier\index.cjs'
["DEBUG" - 2:29:40 PM] Using prettier version 3.0.0
["ERROR" - 2:29:40 PM] Invalid prettier configuration file detected.
{}
["ERROR" - 2:29:40 PM] Invalid prettier configuration file detected. See log for details.

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

zkulbeda · 2023-07-11T18:46:06Z

Cosmiconfig uses require as fallback when esm module import throws error. I manually edited prettier in node_modules to throw instead of fallback and got this error

["ERROR" - 18:32:33] Error resolving prettier configuration for /home/ubuntu/workspace/UsersSearchBot
["ERROR" - 18:32:33] Cannot find package 'prettier-plugin-tailwind' imported from /home/ubuntu/workspace/UsersSearchBot/prettier.config.mjs
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier-plugin-tailwind' imported from /home/ubuntu/workspace/UsersSearchBot/prettier.config.mjs
    at new NodeError (node:internal/errors:387:5)
    at packageResolve (node:internal/modules/esm/resolve:951:9)
    at moduleResolve (node:internal/modules/esm/resolve:1000:20)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

My prettier.config.js

import tailwind from "prettier-plugin-tailwindcss";

/** @type {import("prettier").Options} */
export default {
  printWidth: 80,
  trailingComma: "all",
  htmlWhitespaceSensitivity: "css",
  plugins: [tailwind],
};

Seems prettier vscode plugin can't resolve imports from prettier config. I'm using pnpm as package manager and got same error if using imports from my config. If I remove imports from config, the error will disappear This error appears when cosmiconfig import ends up with error.

michaelhays · 2023-07-11T18:50:31Z

@zkulbeda I noticed the error message says 'prettier-plugin-tailwind' instead of 'prettier-plugin-tailwindcss', is that the most recent error message?

zkulbeda · 2023-07-11T19:08:13Z

Oh, seems plugin can't load new config, and on every attempt tries import old file. I use Developer: Restart Extension Host to reload config and it's working. The import error disappear, but there is another one

I deleted node_modules and install depencies to wipe my changes. pnpm prettier --write . runs without error

michaelhays · 2023-07-11T19:10:36Z

Got it, yep that's the exact same error I'm getting.

zkulbeda · 2023-07-12T16:21:00Z

@michaelhays did you solve the problem? I didn't. We should open another issue if so

michaelhays · 2023-07-12T16:30:37Z

I think it's the same issue as this one -- the error only happens for me when using ESM import.

I was able to make it work for now by using CommonJS for this file instead, by naming it prettier.config.cjs:

/** @type {import("prettier").Options} */
module.exports = {
  semi: false,
  singleQuote: true,
  plugins: ['prettier-plugin-tailwindcss'],
}

zkulbeda · 2023-07-12T17:04:21Z

Hm, it also works with esm without import. So I suppose the problem isn't about esm

/** @type {import("prettier").Options} */
export default {
	printWidth: 80,
	trailingComma: "all",
	htmlWhitespaceSensitivity: "css",
	plugins: ["prettier-plugin-tailwindcss"],
};

hisham · 2023-07-13T15:50:26Z

My prettier config is in package.json. 2.8.8 works fine. Upgrading to prettier 3.0 makes this plugin fail with following error:

["DEBUG" - 9:49:41 AM] Local prettier module path: '/Users/hisham/src/ess-app/node_modules/prettier'
["DEBUG" - 9:49:41 AM] Using prettier version 3.0.0
["ERROR" - 9:49:41 AM] Error resolving prettier configuration for /Users/hisham/src/ess-app
["ERROR" - 9:49:41 AM] Invalid host defined options
TypeError: Invalid host defined options
    at Object.<anonymous> (/Users/hisham/src/ess-app/node_modules/prettier/index.cjs:600:23)

Running prettier from command line works fine.

Issue for ref: prettier/prettier-vscode#3066

tebuevd · 2023-07-25T17:38:55Z

Getting the same error when on prettier@3 with the following config:

//prettier.config.js

/** @type {import('prettier').Config} */
module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: false,
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./packages/configs/tailwind/tailwind.config.js",
  tailwindAttributes: [
    "modalStyles",
    "titleStyles",
    "subtitleStyles",
    "iconStyles",
  ],
  tailwindFunctions: ["clsx", "cn"],
}

mironote · 2023-07-31T01:54:10Z

getting the save error with prettier@3 on vscode

["ERROR" - 09:47:27] Error handling text editor change
["ERROR" - 09:47:27] Invalid host defined options
TypeError: Invalid host defined options
    at Object.<anonymous> (/Users/fengxing/miro/mironote/node_modules/prettier/index.cjs:600:23)
    at Module.u._compile (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:1271)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1243:10)
    at Module.load (node:internal/modules/cjs/loader:1058:32)
    at Module._load (node:internal/modules/cjs/loader:893:12)
    at Function.f._load (node:electron/js2c/asar_bundle:2:13330)
    at Function.l._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:28070)
    at Function.p._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:127:25404)
    at Function.u._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:91:22191)
    at Module.require (node:internal/modules/cjs/loader:1082:19)
    at g (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:647)
    at t.loadNodeModule (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:2829)
    at t.PrettierMainThreadInstance.import (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:17760)
    at t.ModuleResolver.getPrettierInstance (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:5728)
    at t.default.handleActiveTextEditorChanged (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:10771)
    at t.default.handleActiveTextEditorChangedSync (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:10373)
    at t.default.registerDisposables (/Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:13531)
    at /Users/fengxing/.vscode/extensions/esbenp.prettier-vscode-9.19.0/dist/extension.js:1:82528

drgarlic · 2023-08-09T13:49:07Z

Getting the same error when on prettier@3 with the following config:

//prettier.config.js

/** @type {import('prettier').Config} */
module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: false,
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./packages/configs/tailwind/tailwind.config.js",
  tailwindAttributes: [
    "modalStyles",
    "titleStyles",
    "subtitleStyles",
    "iconStyles",
  ],
  tailwindFunctions: ["clsx", "cn"],
}

@tebuevd

I didn't try your exact config but had the issue with plugins: [require("prettier-plugin-tailwindcss")],.
Changing it to plugins: ['prettier-plugin-tailwindcss'], worked

crklan · 2023-08-10T07:16:51Z

I'm experiencing the same problem as described above. My config file .prettierrc.js looks like this:

module.exports = {
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "singleAttributePerLine": false,
    "bracketSpacing": true,
    "plugins": [
        require("prettier-plugin-organize-attributes"),
    ],
}

If require is removed, the prettier doesn't work from the CLI, as I'm using Git hooks to format the code on precommit and I get the same error as in this issue.

ChristianIvicevic · 2023-08-12T06:11:46Z

I am working in a monorepo and trying to compose the prettier config. At root level I have this file:

/** @type import('prettier').Config */
export default {
  printWidth: 110,
  endOfLine: 'auto',
  singleQuote: true,
  trailingComma: 'none'
};

In one of my apps within the monorepo I was attempting this

import baseConfig from '../../prettier.config.mjs';

/** @type import('prettier').Config */
export default {
  ...baseConfig,
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindConfig: 'tailwind.config.mjs',
  tailwindFunctions: ['cn']
};

This was failing with the following error message

[error] Invalid configuration for file "src/app/components.client.tsx":
[error] require() of ES Module prettier.config.mjs not supported.
[error] Instead change the require of prettier.config.mjs to a dynamic import() which is available in all CommonJS modules.

Only after researching the issue thoroughly I stumbled upon this thread and noticed that I have to remove the import for now which makes the config not composable, sadly.

semihraifgurel · 2023-08-21T06:53:47Z

@gawlk

I didn't try your exact config but had the issue with plugins: [require("prettier-plugin-tailwindcss")],. Changing it to plugins: ['prettier-plugin-tailwindcss'], worked

Thank you, when I do this it runs smoothly.

const config = {
	plugins: ['prettier-plugin-tailwindcss'],
	printWidth: 100,
	tabWidth: 4,
	useTabs: true,
	semi: true,
	singleQuote: true,
	jsxSingleQuote: true,
	trailingComma: 'all',
	bracketSameLine: true,
	arrowParens: 'always',
	endOfLine: 'lf',
};

module.exports = config;

elie222 · 2023-08-30T10:12:59Z

Wasn't able to get any of the above working. We also use pretty-quick so that may be the cause. Reverting to "prettier-plugin-tailwindcss": "^0.4.1", for now.

Bug: unable to use ESM, see: prettier/prettier-vscode#3066

ethernal · 2023-09-18T10:36:45Z

For me when using NextJS 13 with latest prettier, neither .cjs or .js worked but changing config file to .ts fixed the issue.

// prettier.config.ts
/** @type {import('prettier').Config} */
module.exports = {
  semi: true,
  singleQuote: true,
  plugins: ['prettier-plugin-tailwindcss'],
};

liamlows · 2023-09-21T20:14:54Z

For me when using NextJS 13 with latest prettier, neither .cjs or .js worked but changing config file to .ts fixed the issue.
// prettier.config.ts
/** @type {import('prettier').Config} */
module.exports = {
  semi: true,
  singleQuote: true,
  plugins: ['prettier-plugin-tailwindcss'],
};

I have been searching for a solution to this for ages! Thank you so much for sharing, this worked for me!

Spikatrix · 2023-09-22T06:49:30Z

Changing plugins: ['plugin-name'] to plugins: [require.resolve('plugin-name')] works for me in both vscode and precommit

risu729 · 2023-09-23T21:44:58Z

For me, prettier.config.cjs with plugins: [require.resolve('plugin-name')] like below worked for both the vscode extension and CLI.

Using prettier.config.ts resolved the error; however, the plugin did not work.
Also, plugins: ['plugin-name'] and plugins: [require('plugin-name')] didn't throw errors, but the plugin didn't work.

module.exports = {
  plugins: [require.resolve("prettier-plugin-organize-imports")],
};

Aszurar · 2023-09-26T19:58:04Z

Getting the same error when on prettier@3 with the following config:
//prettier.config.js

/** @type {import('prettier').Config} */
module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: false,
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./packages/configs/tailwind/tailwind.config.js",
  tailwindAttributes: [
    "modalStyles",
    "titleStyles",
    "subtitleStyles",
    "iconStyles",
  ],
  tailwindFunctions: ["clsx", "cn"],
}
@tebuevd

I didn't try your exact config but had the issue with plugins: [require("prettier-plugin-tailwindcss")],. Changing it to plugins: ['prettier-plugin-tailwindcss'], worked

Thanks, solved it here by removing the require

viceice · 2023-10-12T08:12:50Z

doesn't work for me:

`Invalid prettier configuration file detected.`

// .prettierrc.cjs
/** @type {import("prettier").Options} */
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  plugins: [require('prettier-plugin-packagejson')],
};

`require() of ES Module ~\gh\containerbase\maven-prebuild\.prettierrc.mjs not supported.`

import pkgJson from 'prettier-plugin-packagejson';

/** @type {import("prettier").Options} */
export default {
  singleQuote: true,
  trailingComma: 'all',
  plugins: [pkgJson],
};

myleslee · 2023-10-19T00:24:44Z

// .prettierrc.cjs
/** @type {import("prettier").Options} */
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  plugins: [require.resolve('prettier-plugin-packagejson')],
};
no: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
BTW: I'm using yarn pnp mode
hey, did you end up finding a fix for this? we're having the same exact issue with yarn pnp

Restarting the VSCode after require.resolve() was applied fixed my issue.

CamaleonGamer · 2023-11-07T00:12:52Z

// .prettierrc.cjs
/** @type {import("prettier").Options} */
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  plugins: [require.resolve('prettier-plugin-packagejson')],
};
no: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
BTW: I'm using yarn pnp mode
hey, did you end up finding a fix for this? we're having the same exact issue with yarn pnp
Restarting the VSCode after require.resolve() was applied fixed my issue.

I had the same problem and it was fixed by restarting vscode

90dy · 2023-11-09T10:34:16Z

@gawlk
I didn't try your exact config but had the issue with plugins: [require("prettier-plugin-tailwindcss")],. Changing it to plugins: ['prettier-plugin-tailwindcss'], worked

Thank you, when I do this it runs smoothly.
const config = {
	plugins: ['prettier-plugin-tailwindcss'],
	printWidth: 100,
	tabWidth: 4,
	useTabs: true,
	semi: true,
	singleQuote: true,
	jsxSingleQuote: true,
	trailingComma: 'all',
	bracketSameLine: true,
	arrowParens: 'always',
	endOfLine: 'lf',
};

module.exports = config;

This is the solution for prettier@^3

iamandrewluca · 2023-12-08T18:39:47Z

The solution for me was to remove node_modules and run npm install again and reload the VSCode.

PS: Whenever prettier related stuff is changed, is better to reload the VSCode to get the new changes.

vincerubinetti · 2023-12-18T19:39:41Z

Using the ESM config example straight from the docs (from my default config in my home directory) throws this error:

["ERROR" - 2:38:44 PM] Error resolving prettier configuration for /Users/vincerubinetti/.prettierrc.js
["ERROR" - 2:38:44 PM] Invalid or unexpected token
/Users/vincerubinetti/.prettierrc.js:1
(function (exports, require, module, __filename, __dirname) { ��c
                                                             
SyntaxError: Invalid or unexpected token

~~Have to use commonjs it seems.~~ Actually this throws basically the same error. So this extension basically just doesn't work at all, in any capacity lol.

iamandrewluca · 2023-12-18T20:04:17Z

Actually this throws basically the same error. So this extension basically just doesn't work at all, in any capacity lol.

@vincerubinetti Mostly you did not configure something right. Extension basically just does what is supposed to do.

vincerubinetti · 2023-12-18T20:21:23Z

@vincerubinetti Mostly you did not configure something right. Extension basically just does what is supposed to do.

@iamandrewluca Nope. My extension has all the default settings (no prettier. entries in settings.json), and I simply have export default {} in ~/.prettierrc.js (UTF-8 encoded), and a it throws an error (same thing with prettier.config.js). This may have something to do with the fact that I am trying to format files that are not in a directory with a package.json that defines a type. Naming the file .prettierrc.mjs or prettier.config.mjs, the extension just doesn't even detect it.

karlhorky · 2024-02-05T16:46:22Z

Crash description + reproduction

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

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

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

["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)

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 ([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.

Workaround

Add Prettier v3 to your dependencies in every project 😬

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

Fix

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

karlhorky · 2024-02-05T16:58:19Z

Just saw that this issue has "Prettier v3" in the title, whereas the VS Code extension is not yet on Prettier v3 internally (hopefully soon!).

I created a new issue over here:

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

Issue for ref: prettier/prettier-vscode#3066

github-actions · 2024-04-06T01:48:18Z

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

karlhorky · 2024-04-06T08:49:10Z

I guess this hasn't been resolved yet.

flying-sheep · 2024-04-06T13:54:23Z

Also the bot malfunctions. You replied and the [stale] is still there

circlingthesun · 2024-05-24T10:52:13Z

If you are using yarn pnp the following fixed it for me: yarn dlx @yarnpkg/sdks vscode

github-actions · 2024-07-24T01:54:48Z

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

karlhorky · 2024-07-24T05:24:34Z

Probably not stale

iamandrewluca · 2024-07-24T06:55:59Z

For me, it seems to work fine. Prettier v3 and ESM

2024-07-24.09-53-38.mp4

karlhorky · 2024-07-24T07:30:24Z

@iamandrewluca look through some of the other comments eg. the one I posted above - your particular setup may work, but there are still issues here, as far as I last checked.

iamandrewluca · 2024-07-24T08:43:37Z

Uninstalled prettier, and yes, I can confirm that "Format Document" fails with the same error.

flying-sheep · 2024-07-24T11:51:27Z

@prettier can you please fix your bot and also pin this issue so the bot doesn’t come back?

fisker · 2024-07-26T14:37:32Z

@sosukesuzuki Is it possible to load config in worker? The main thread should not need the config.

reeshabhranjan · 2024-08-07T11:28:36Z

Go to VS Code settings (UI). Search for prettier path. Update it to .prettierrc, .prettierrc.json, .prettierrc.yaml or whatever you want to use. In my case, I had the .prettierrc.json file but VS Code was expecting a .prettierrc.

…ues with prettier/prettier-vscode#3066.

tkrotoff · 2024-09-03T13:50:12Z

For those having issues when specifying plugins using a string (plugins: ['a-prettier-plugin']), it can fail if you open multiple projects in the same VSCode window.
In this case vscode-eslint doesn't know from which node_modules to load the plugin (there is no root node_modules folder).

To fix this, explicitly import the plugin with plugins: [require.resolve('a-prettier-plugin')] (instead of plugins: ['a-prettier-plugin']) in CJS (using regular import in ESM does not work with esbenp.prettier-vscode: "Invalid prettier configuration file detected"):

// File prettier.config.cjs

/** @type {import('prettier').Options} */
module.exports = {
  plugins: [require.resolve('a-prettier-plugin')]
};

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

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

Comments

risu729 commented Jul 7, 2023 • edited Loading

Summary

Github Repository to Reproduce Issue

Steps To Reproduce:

Expected result

Actual result

Additional information

Prettier Log Output

zkulbeda commented Jul 11, 2023 • edited Loading

michaelhays commented Jul 11, 2023

zkulbeda commented Jul 11, 2023

michaelhays commented Jul 11, 2023

zkulbeda commented Jul 12, 2023

michaelhays commented Jul 12, 2023

zkulbeda commented Jul 12, 2023

hisham commented Jul 13, 2023

tebuevd commented Jul 25, 2023

mironote commented Jul 31, 2023 • edited Loading

drgarlic commented Aug 9, 2023

crklan commented Aug 10, 2023

ChristianIvicevic commented Aug 12, 2023

semihraifgurel commented Aug 21, 2023 • edited Loading

elie222 commented Aug 30, 2023 • edited Loading

ethernal commented Sep 18, 2023 • edited Loading

liamlows commented Sep 21, 2023

Spikatrix commented Sep 22, 2023

risu729 commented Sep 23, 2023 • edited Loading

Aszurar commented Sep 26, 2023

viceice commented Oct 12, 2023

Invalid prettier configuration file detected.

require() of ES Module ~\gh\containerbase\maven-prebuild\.prettierrc.mjs not supported.

myleslee commented Oct 19, 2023

CamaleonGamer commented Nov 7, 2023

90dy commented Nov 9, 2023

iamandrewluca commented Dec 8, 2023 • edited Loading

vincerubinetti commented Dec 18, 2023 • edited Loading

iamandrewluca commented Dec 18, 2023

vincerubinetti commented Dec 18, 2023 • edited Loading

karlhorky commented Feb 5, 2024

Crash description + reproduction

Cause

Workaround

Fix

karlhorky commented Feb 5, 2024

github-actions bot commented Apr 6, 2024

karlhorky commented Apr 6, 2024

flying-sheep commented Apr 6, 2024

circlingthesun commented May 24, 2024

github-actions bot commented Jul 24, 2024

karlhorky commented Jul 24, 2024

iamandrewluca commented Jul 24, 2024

karlhorky commented Jul 24, 2024

iamandrewluca commented Jul 24, 2024

flying-sheep commented Jul 24, 2024

fisker commented Jul 26, 2024

reeshabhranjan commented Aug 7, 2024

tkrotoff commented Sep 3, 2024 • edited Loading

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

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

risu729 commented Jul 7, 2023 •

edited

Loading

zkulbeda commented Jul 11, 2023 •

edited

Loading

mironote commented Jul 31, 2023 •

edited

Loading

semihraifgurel commented Aug 21, 2023 •

edited

Loading

elie222 commented Aug 30, 2023 •

edited

Loading

ethernal commented Sep 18, 2023 •

edited

Loading

risu729 commented Sep 23, 2023 •

edited

Loading

`Invalid prettier configuration file detected.`

`require() of ES Module ~\gh\containerbase\maven-prebuild\.prettierrc.mjs not supported.`

iamandrewluca commented Dec 8, 2023 •

edited

Loading

vincerubinetti commented Dec 18, 2023 •

edited

Loading

vincerubinetti commented Dec 18, 2023 •

edited

Loading

tkrotoff commented Sep 3, 2024 •

edited

Loading