Prettier cannot load ESM config in V3

[jansedlon]

Hi, I noticed that Prettier V3 supports ESM. However, it doesn't really work for me when I use it in VSCode. That's the log

["INFO" - 07:47:05] Formatting file:///Users/jansedlon/Work/Trainspire/app/routes/_creator.workout-programs_.%24id/route.tsx
["ERROR" - 07:47:05] Error resolving prettier configuration for /Users/jansedlon/Work/Trainspire/app/routes/_creator.workout-programs_.$id/route.tsx
["ERROR" - 07:47:05] require() of ES Module /Users/jansedlon/Work/Trainspire/prettier.config.js from /Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs not supported.
Instead change the require of prettier.config.js in /Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/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 /Users/jansedlon/Work/Trainspire/prettier.config.js from /Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs not supported.
Instead change the require of prettier.config.js in /Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/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:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:173:34)
    at loadJsSync2 (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5394:22)
    at loadJs2 (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5404:16)
    at async Explorer.loadFileContent (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5763:18)
    at async Explorer.createCosmiconfigResult (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5770:29)
    at async Explorer.loadSearchPlace (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5752:16)
    at async Explorer.searchDirectory (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5742:31)
    at async run (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5728:26)
    at async Explorer.search (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/internal/internal.mjs:5723:16)
    at async Module.resolveConfigFile (file:///Users/jansedlon/Work/Trainspire/node_modules/.pnpm/prettier@3.0.0/node_modules/prettier/index.mjs:20333:18)

Anyone knows what to do?

And that's my config in prettier.config.js. (Yes, I have "type": "module" in package.json

import prettierConfig from "@fusion-dx/prettier-config";

/**
 * @type {import('prettier').Options}
 */
export default {
  ...prettierConfig,
  plugins: [
    require("prettier-plugin-sql"),
    require("prettier-plugin-tailwindcss"),
  ],
  tailwindFunctions: ["clsx"],
}

[jansedlon]

Fml.. I thought about deleting this, but if anyone comes around the same issue, just remove the require from plugins and pass the plugin name in plain string. 🤦‍♂️ And restart VSCode

import prettierConfig from "@fusion-dx/prettier-config";

/**
 * @type {import('prettier').Options}
 */
export default {
  ...prettierConfig,
  plugins: [
    "prettier-plugin-sql",
    "prettier-plugin-tailwindcss",
  ],
  tailwindFunctions: ["clsx"],
}