prettier@3+ integration

[virtuoushub]

Some breaking changes were introduced with the new version of prettier.

It looks like at the very least this line will need updating:

• (const PRETTIER_PATH = require.resolve('prettier/bin-prettier');)
  

  nx/packages/nx/src/command-line/format/format.ts

  Line 26 in 64765eb

  const PRETTIER_PATH = require.resolve('prettier/bin-prettier');

due to this change:

• (bin-prettier.js -> bin/prettier.cjs) https://github.com/prettier/prettier/blob/e2f4ce38f7c1dac1d1ec5371670a93e3844f6b39/website/blog/2023-07-05-3.0.0.md?plain=1#L334

---

          I have a different issue while updating prettier to the latest version `v3.0.0`:

 >  NX   Running global Nx CLI with PNPM may have issues.

   Prefer to use "pnpm" (https://pnpm.io/cli/exec) to execute commands in this workspace.
    TIP  create a shortcut such as: alias pnx="pnpm nx --"


nx format:check

Check for un-formatted files

Run command using --base=[SHA1] (affected by the committed, uncommitted and untracked changes):
  --base  Base of the current branch (usually main)                                    [string]

or using --base=[SHA1] --head=[SHA2] (affected by the committed changes):
  --base  Base of the current branch (usually main)                                    [string]
  --head  Latest commit of the current branch (usually HEAD)                           [string]

or using:
  --files        Change the way Nx is calculating the affected command by providing directly
                 changed files, list of files delimited by commas or spaces            [string]
  --uncommitted  Uncommitted changes                                                  [boolean]
  --untracked    Untracked changes                                                    [boolean]

Options:
  --help           Show help                                                          [boolean]
  --version        Show version number                                                [boolean]
  --exclude        Exclude certain projects from being processed                       [string]
  --libs-and-apps  Format only libraries and applications files.                      [boolean]
  --projects       Projects to format (comma/space delimited)                          [string]
  --all            Format all projects                                                [boolean]

Find more information and examples at https://nx.dev/nx/format-check

Error: Cannot find module '/Users/sebpalluel/Documents/dev/offline/marketplace/node_modules/prettier/bin-prettier'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1104:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1097:15)
    at resolveExports (node:internal/modules/cjs/loader:569:14)
    at Module._findPath (node:internal/modules/cjs/loader:643:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1068:27)
    at Function.resolve (/Users/sebpalluel/Documents/dev/offline/marketplace/node_modules/.pnpm/[email protected]/node_modules/v8-compile-cache/v8-compile-cache.js:164:23)
    at Object.<anonymous> (/Users/sebpalluel/Documents/dev/offline/marketplace/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]/node_modules/nx/src/command-line/format/format.js:18:31)
    at Module._compile (/Users/sebpalluel/Documents/dev/offline/marketplace/node_modules/.pnpm/[email protected]/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/sebpalluel/Documents/dev/offline/marketplace/node_modules/prettier/package.json'
}

I'm using the latest version of nx 16.5.0

Originally posted by @sebpalluel in #16121 (comment)

[SimeonC]

I tried hacking around this in node_modules by changing to the following;

let v2PrettierPath;
let v3PrettierPath;
try {
    v2PrettierPath = require.resolve('prettier/bin-prettier');
} catch (e) {}
try {
    v3PrettierPath = require.resolve('prettier/bin/prettier');
} catch (e) {}
const PRETTIER_PATH = v2PrettierPath || v3PrettierPath;

This then started throwing a new error which indicates to me this may be an issue of cjs/esm. The offending line of code in NX is just const prettier = require('prettier')

/node_modules/prettier/index.cjs:600
var prettierPromise = import("./index.mjs");
                      ^

TypeError: Invalid host defined options
    at Object.<anonymous> (/node_modules/prettier/index.cjs:600:23)
    at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at Mod.require (/node_modules/nx/bin/init-local.js:204:36)
    at require (/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/node_modules/nx/src/command-line/format/format.js:10:18)
    at Module._compile (/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)

[hersman]

@SimeonC if you fully qualify the extension of the V3 path, e.g. v3PrettierPath = require.resolve('prettier/bin/prettier.cjs');, it works fine.

[hersman]

However, that's only a partial fix because Prettier also changed their API syntax in a breaking way, so it looks like nx probably needs to make the choice of forcing people to use v3 throughout or make a bunch of v2/v3 checks throughout.

[SimeonC]

I found the most reliable way of doing this for my own no plugins ended up being using spawn_child with npx prettier -w …. That way I’m not relying on the api and it works in both v2 and v3

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.