prettier-vscode
prettier-vscode copied to clipboard
prettier
`require()` cannot be used in `.prettier.cjs`
Summary
This config file, ~/.prettierrc.cjs, works with prettier CLI.
module.exports = {
...require(require('path').join(
'.config',
'.prettierrc.cjs',
)),
};
However, the VS Code extension cannot parse it.
Github Repository to Reproduce Issue
Any repo without local config. This issue use the config in home dir.
Steps To Reproduce:
- Create the config in home dir.
- Open VS Code.
- Save any file in VS Code.
Expected result
The extension should be able to use .prettierrc.cjs without issue, just like the CLI.
Actual result
Extension host throw error.
2025-05-16 21:29:39.767 [error] [esbenp.prettier-vscode] provider FAILED
2025-05-16 21:29:39.772 [error] Error: require() cannot be used on an ESM graph with top-level await. Use import() instead. To see where the top-level await comes from, use --experimental-print-required-tla.
at ModuleJobSync.runSync (node:internal/modules/esm/module_job:384:13)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:323:47)
at loadESMFromCJS (node:internal/modules/cjs/loader:1378:24)
at Module._compile (node:internal/modules/cjs/loader:1518:5)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1588:16)
at Module.load (node:internal/modules/cjs/loader:1282:32)
at Module._load (node:internal/modules/cjs/loader:1103:12)
at Function.c._load (node:electron/js2c/node_init:2:16955)
at Function.e._load (file:///c:/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:225:1509)
at Function.t._load (file:///c:/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:180:22628)
at Function.r._load (file:///c:/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:172:22062)
at Module.require (node:internal/modules/cjs/loader:1305:19)
at require (node:internal/modules/helpers:182:18)
at C:\data\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:38143:10
at Array.map (<anonymous>)
at Object.load (C:\data\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:38141:128)
at Object.load [as loadPlugins] (C:\data\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:16147:23)
at Object.getFileInfo (C:\data\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:38181:24)
at t.default.format (C:\data\extensions\esbenp.prettier-vscode-11.0.0\dist\extension.js:1:15478)
at t.PrettierEditProvider.provideEdits (C:\data\extensions\esbenp.prettier-vscode-11.0.0\dist\extension.js:1:12927)
at L3.provideDocumentFormattingEdits (file:///c:/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:145:135005)
Additional information
I also tried ~/.prettierrc.mjs but it doesn't work.
VS Code Version:
Version: 1.100.1
Commit: 91fa95bccb027ece6a968589bb1d662fa9c8e170
Date: 2025-05-09T15:43:50.040Z
Electron: 34.5.1
ElectronBuildId: 11369351
Chromium: 132.0.6834.210
Node.js: 20.19.0
V8: 13.2.152.41-electron.0
OS: Windows_NT x64 10.0.26100
Prettier Extension Version:
11.0.0
OS and version:
Windows 11 (24H2) (26100.4061)
Prettier Log Output
["INFO" - 9:33:10 PM] Using ignore file (if present) at c:\test.js
["INFO" - 9:33:38 PM] Formatting file:///c%3A/Users/user/.prettierrc.cjs
["INFO" - 9:33:38 PM] Using config file at c:\Users\user\.prettierrc.cjs
["INFO" - 9:33:38 PM] PrettierInstance:
{
"doc": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
]
},
"literalline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true,
"literal": true
},
{
"type": "break-parent"
}
]
},
"lineSuffixBoundary": {
"type": "line-suffix-boundary"
},
"cursor": {
"type": "cursor"
},
"breakParent": {
"type": "break-parent"
},
"trim": {
"type": "trim"
},
"hardlineWithoutBreakParent": {
"type": "line",
"hard": true
},
"literallineWithoutBreakParent": {
"type": "line",
"hard": true,
"literal": true
}
},
"printer": {},
"utils": {},
"debug": {}
},
"version": "2.8.8",
"util": {},
"__internal": {
"errors": {},
"coreOptions": {
"CATEGORY_CONFIG": "Config",
"CATEGORY_EDITOR": "Editor",
"CATEGORY_FORMAT": "Format",
"CATEGORY_OTHER": "Other",
"CATEGORY_OUTPUT": "Output",
"CATEGORY_GLOBAL": "Global",
"CATEGORY_SPECIAL": "Special",
"options": {
"cursorOffset": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": -1,
"range": {
"start": -1,
"end": null,
"step": 1
},
"description": "Print (to stderr) where a cursor at the given position would move to after formatting.\nThis option cannot be used with --range-start and --range-end.",
"cliCategory": "Editor"
},
"endOfLine": {
"since": "1.15.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "1.15.0",
"value": "auto"
},
{
"since": "2.0.0",
"value": "lf"
}
],
"description": "Which end of line characters to apply.",
"choices": [
{
"value": "lf",
"description": "Line Feed only (\\n), common on Linux and macOS as well as inside git repos"
},
{
"value": "crlf",
"description": "Carriage Return + Line Feed characters (\\r\\n), common on Windows"
},
{
"value": "cr",
"description": "Carriage Return character only (\\r), used very rarely"
},
{
"value": "auto",
"description": "Maintain existing\n(mixed values within one file are normalised by looking at what's used after the first line)"
}
]
},
"filepath": {
"since": "1.4.0",
"category": "Special",
"type": "path",
"description": "Specify the input filepath. This will be used to do parser inference.",
"cliName": "stdin-filepath",
"cliCategory": "Other",
"cliDescription": "Path to the file to pretend that stdin comes from."
},
"insertPragma": {
"since": "1.8.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Insert @format pragma into file's first docblock comment.",
"cliCategory": "Other"
},
"parser": {
"since": "0.0.10",
"category": "Global",
"type": "choice",
"default": [
{
"since": "0.0.10",
"value": "babylon"
},
{
"since": "1.13.0"
}
],
"description": "Which parser to use.",
"choices": [
{
"value": "flow",
"description": "Flow"
},
{
"value": "babel",
"since": "1.16.0",
"description": "JavaScript"
},
{
"value": "babel-flow",
"since": "1.16.0",
"description": "Flow"
},
{
"value": "babel-ts",
"since": "2.0.0",
"description": "TypeScript"
},
{
"value": "typescript",
"since": "1.4.0",
"description": "TypeScript"
},
{
"value": "acorn",
"since": "2.6.0",
"description": "JavaScript"
},
{
"value": "espree",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "meriyah",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "css",
"since": "1.7.1",
"description": "CSS"
},
{
"value": "less",
"since": "1.7.1",
"description": "Less"
},
{
"value": "scss",
"since": "1.7.1",
"description": "SCSS"
},
{
"value": "json",
"since": "1.5.0",
"description": "JSON"
},
{
"value": "json5",
"since": "1.13.0",
"description": "JSON5"
},
{
"value": "json-stringify",
"since": "1.13.0",
"description": "JSON.stringify"
},
{
"value": "graphql",
"since": "1.5.0",
"description": "GraphQL"
},
{
"value": "markdown",
"since": "1.8.0",
"description": "Markdown"
},
{
"value": "mdx",
"since": "1.15.0",
"description": "MDX"
},
{
"value": "vue",
"since": "1.10.0",
"description": "Vue"
},
{
"value": "yaml",
"since": "1.14.0",
"description": "YAML"
},
{
"value": "glimmer",
"since": "2.3.0",
"description": "Ember / Handlebars"
},
{
"value": "html",
"since": "1.15.0",
"description": "HTML"
},
{
"value": "angular",
"since": "1.15.0",
"description": "Angular"
},
{
"value": "lwc",
"since": "1.17.0",
"description": "Lightning Web Components"
}
]
},
"plugins": {
"since": "1.10.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Add a plugin. Multiple plugins can be passed as separate `--plugin`s.",
"cliName": "plugin",
"cliCategory": "Config"
},
"pluginSearchDirs": {
"since": "1.13.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Custom directory that contains prettier plugins in node_modules subdirectory.\nOverrides default behavior when plugins are searched relatively to the location of Prettier.\nMultiple values are accepted.",
"cliName": "plugin-search-dir",
"cliCategory": "Config"
},
"printWidth": {
"since": "0.0.0",
"category": "Global",
"type": "int",
"default": 80,
"description": "The line length where Prettier will try wrap.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"rangeEnd": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": null,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code ending at a given character offset (exclusive).\nThe range will extend forwards to the end of the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"rangeStart": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": 0,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code starting at a given character offset.\nThe range will extend backwards to the start of the first line containing the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"requirePragma": {
"since": "1.7.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Require either '@prettier' or '@format' to be present in the file's first docblock comment\nin order for it to be formatted.",
"cliCategory": "Other"
},
"tabWidth": {
"type": "int",
"category": "Global",
"default": 2,
"description": "Number of spaces per indentation level.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"useTabs": {
"since": "1.0.0",
"category": "Global",
"type": "boolean",
"default": false,
"description": "Indent with tabs instead of spaces."
},
"embeddedLanguageFormatting": {
"since": "2.1.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "2.1.0",
"value": "auto"
}
],
"description": "Control how Prettier formats quoted code embedded in the file.",
"choices": [
{
"value": "auto",
"description": "Format embedded code if Prettier can automatically identify it."
},
{
"value": "off",
"description": "Never automatically format embedded code."
}
]
}
}
},
"optionsModule": {
"hiddenDefaults": {
"astFormat": "estree",
"printer": {},
"locStart": null,
"locEnd": null
}
},
"optionsNormalizer": {},
"utils": {}
},
"__debug": {}
}
I'm facing the same issue here. It happened right after VSCode update.
I'm using prettier.config.js
/**
* @see https://prettier.io/docs/en/configuration.html
* @type {import("prettier").Config}
*/
const config = {
plugins: ['prettier-plugin-tailwindcss'],
trailingComma: 'none',
tabWidth: 2,
singleQuote: true
};
module.exports = config;
VS Code version:
Version: 1.100.2 (user setup)
Commit: 848b80aeb52026648a8ff9f7c45a9b0a80641e2e
Date: 2025-05-14T21:47:40.416Z
Electron: 34.5.1
ElectronBuildId: 11369351
Chromium: 132.0.6834.210
Node.js: 20.19.0
V8: 13.2.152.41-electron.0
OS: Windows_NT x64 10.0.26100
ChatGPT solved it for me!
TLDR:
Prettier VS Code extension still ships with Prettier 2.x, and something in the “load chain” was just converted to pure ESM and now contains a top-level await.
When Prettier 2 tries to require() that module, Node bails out with error:
require() cannot be used on an ESM graph with top-level await
Solution:
Install Prettier 3.x explicitly in your project:
pnpm add -D prettier
Tell VS Code to use your local Prettier: In your .vscode/settings.json (create it if needed):
{
"prettier.prettierPath": "./node_modules/prettier",
"prettier.requireConfig": true
}
This solves the issue. I was looking for a way to install the right library but I didn't know how to do it. Running pnpm add -D prettier did the trick!
Thanks
