Prettier-vscode: Unable to resolve custom configuration module

[vincerubinetti]

Summary

It seems that version 4.0.0 released a few hours ago breaks importing/using custom Prettier configs. Downgrading to 3.20.0 fixes the issue.

I know 4.0.0 would be a breaking change, but I don't see anything in the change logs or in the readme that indicates that custom configs would work differently...

Github Repository to Reproduce Issue

https://github.com/greenelab/prettier-config-greenelab

Steps To Reproduce:

1. Create a new project with npm init
2. Install this custom Prettier config with yarn add --dev git+https://[email protected]/greenelab/prettier-config-greenelab.git
3. Create .prettierrc.yaml and put this in it: prettier-config-greenelab
4. Install the prettier-vscode extension and try to format some javascript code with it

Expected result

The code should format with no errors in the console.

Actual result

The code does not format, and throws errors, as copy-pasted below

Additional information

_Feel free to attach a screenshot_.

VS Code Version: 1.43.2

Prettier Extension Version: 4.0.0

OS and version: Windows 10 64bit

Prettier Log Output

["INFO" - 11:27:07 AM] Extension Name: "prettier-vscode".
["INFO" - 11:27:07 AM] Extension Version: "4.0.0".
["INFO" - 11:27:07 AM] Enabling prettier for languages
[
  "css",
  "graphql",
  "html",
  "javascript",
  "javascriptreact",
  "json",
  "json5",
  "jsonc",
  "less",
  "markdown",
  "mdx",
  "mongo",
  "postcss",
  "scss",
  "typescript",
  "typescriptreact",
  "vue",
  "yaml"
]
["INFO" - 11:27:07 AM] Enabling prettier for range supported languages
[
  "graphql",
  "javascript",
  "javascriptreact",
  "json",
  "typescript",
  "typescriptreact"
]
["INFO" - 11:27:08 AM] Formatting c:\Users\Vincent\Desktop\adage-frontend\src\pages\signatures\participating\index.js
["ERROR" - 11:27:08 AM] Invalid prettier configuration file detected.
["ERROR" - 11:27:08 AM] Cannot find module 'prettier-config-greenelab' from 'c:\Users\Vincent\Desktop\adage-frontend'
Error: Cannot find module 'prettier-config-greenelab' from 'c:\Users\Vincent\Desktop\adage-frontend'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:717:15)
    at Function.n.resolve (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:15:584)
    at Object.transform (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\index.js:23283:40)
    at run (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11472:51)
    at async cacheWrapper (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11300:20)
    at async cacheWrapper (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11300:20)
    at async cacheWrapper (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11300:20)
    at async cacheWrapper (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11300:20)
    at async cacheWrapper (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11300:20)
    at async Explorer.search (c:\Users\Vincent\.vscode\extensions\esbenp.prettier-vscode-4.0.0\node_modules\prettier\third-party.js:11457:22)
    at async Promise.all (index 0)

Note that node_modules/prettier-config-greenelab DOES exist in my project. Everything has been installed correctly. I also have a eslint-config-greenelab installed in the same project as well, which works with no problems. And as I said, downgrading prettier-vscode in-situ, while in the same project, works.

[ntotten]

@lipis Would you mind looking at this? It looks like prettier 2.0 may have broken resolveConfig when referencing a module. See: https://github.com/prettier/prettier-vscode/blob/master/src/ConfigResolver.ts#L99

I have confirmed that I can reproduce this.

[lipis]

Hmmm.. Can you post an issue on Prettier directly?! I'm not aware of this change..

[vincerubinetti]

Turns out it's an upstream bug or breaking change with Prettier.

A temporary fix per @ntotten is to change your .prettierrc.yaml to prettier: prettier-config-yourcustomlib instead of just prettier-config-yourcustomlib.

[laozhu]

Prettier config in package.json is broken with new version vscode plugin, but it's OK with prettier.config.jsconfig below.

1. my prettier config

// ./pacakges/chores/prettier.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'consistent',
  jsxSingleQuote: false,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  rangeStart: 0,
  rangeEnd: Infinity,
  requirePragma: false,
  insertPragma: false,
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'css',
  vueIndentScriptAndStyle: true,
  endOfLine: 'lf',
};

2. prettier key in package.json ❌

{
  "prettier": "./packages/chores/prettier",
}

3. prettier.config.js ✅

module.exports = require('./packages/chores/prettier');

4. error screenshot from vscode

[ntotten]

A PR is open on prettier to resolve this, hopefully it can be released quickly into a patch release. I will update the extension as soon as this is read.

See: https://github.com/prettier/prettier/pull/7951

[thorn0]

@ntotten Prettier 2.0.3 is out.

[AndrewLeedham]

This seems to still be broken for me, I made a minimal repro here:
https://github.com/AndrewLeedham/repros/tree/master/packages/prettier-2.0-resolution

Running the actual prettier cli works fine, it just does not seem to resolve it via the extension.

Probably worth noting this is a mono-repo, so to properly recreate: I would just copy the files from the specific linked sub-package. Also note that the issue occurs out of a mono-repo, I just store all my repros in a single repo so I don't have to create new ones every time.

Environment details:

• vscode-prettier: 4.0.0
• prettier 2.0.3
• node 12.16.1
• macOS Catalina (10.15.3)
• vscode 1.43.2

Error summary:

["INFO" - 9:54:03 AM] Extension Name: "prettier-vscode".
["INFO" - 9:54:03 AM] Extension Version: "4.0.0".
["INFO" - 9:54:03 AM] Loaded module '[email protected]' from '**REDACTED**/repros/node_modules/prettier/index.js'
["INFO" - 9:54:03 AM] Enabling prettier for languages
[
  "css",
  "graphql",
  "html",
  "javascript",
  "javascriptreact",
  "json",
  "json5",
  "jsonc",
  "less",
  "markdown",
  "mdx",
  "mongo",
  "postcss",
  "scss",
  "typescript",
  "typescriptreact",
  "vue",
  "yaml"
]
["INFO" - 9:54:03 AM] Enabling prettier for range supported languages
[
  "graphql",
  "javascript",
  "javascriptreact",
  "json",
  "typescript",
  "typescriptreact"
]
["INFO" - 9:54:20 AM] Formatting **REDACTED**/repros/packages/prettier-2.0-resolution/format.js
["ERROR" - 9:54:20 AM] Invalid prettier configuration file detected.
["ERROR" - 9:54:20 AM] Cannot find module '@xerox/prettier-config' from '**REDACTED**/repros/packages/prettier-2.0-resolution'
Error: Cannot find module '@xerox/prettier-config' from '**REDACTED**/repros/packages/prettier-2.0-resolution'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:717:15)
    at Function.n.resolve (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:15:584)
    at Object.transform (**REDACTED**/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/index.js:23283:40)
    at run (**REDACTED**/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11472:51)
    at async cacheWrapper (**REDACTED**/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11300:20)
    at async Explorer.search **REDACTED**/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11457:22)
    at async Promise.all (index 0)

[thorn0]

@AndrewLeedham The new version of the extension, which bundles the new version of Prettier, hasn't been released yet. The extension uses the bundled Prettier package to resolve the config files, not the locally installed one.

[thorn0]

@ntotten Please wait a bit more. I'm going to release 2.0.4 because of a severe regression in 2.0.3 (see https://github.com/prettier/prettier/pull/7958).

[AndrewLeedham]

@AndrewLeedham The new version of the extension, which bundles the new version of Prettier, hasn't been released yet. The extension uses the bundled Prettier package to resolve the config files, not the locally installed one.

I see was not aware of that, slightly confusing given it logs the installed version. Reverting until the new release then. Thanks @thorn0 😃

[thorn0]

@ntotten 2.0.4 is out

[ntotten]

Issue fixed in version 4.1.1 published which has prettier 2.0.4. Thanks for the rapid fix @thorn0!

[mohsinxx365]

I am still having the same problem

[thorn0]

@mohsinxx365 Please fill a proper bug report.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.