failed to load prettier from package.json

[talentlessguy]

Summary

I receive an error when I open package.json file from VS Code

Steps To Reproduce:

1. Open package.json with Prettier extension enabled
2. Add these to settings.json:

"prettier.configPath": "/home/v1rtl/.prettierrc.yml",
"editor.defaultFormatter": "esbenp.prettier-vscode",

and create ~/.prettierrc.yml:

printWidth: 80
semi: false
singleQuote: true
useTabs: false

Expected result

I would open package.json with no errors

Actual result

It dropped this error:

Failed to load module. Attempted to load prettier from package.json.

Also in logs I saw this:

[INFO - 1:36:27 PM] Failed to load prettier from .

Additional information

VS Code Version: 1.40.0

Prettier & Prettier Plugin Version: 3.6.0

OS and version: Manjaro, Linux 4.19.84

[giltayar]

Same here. It made VSCode so unstable ("Host extension" kept dying), that I had to uninstall the extension.

Note that I use a workspace with lots of projects in it, so that may be a problem.

[ahmedsaiddev50]

i had the same problem, after update vscode , just updated devDependencies. eslint, prettier, and now working

[JounQin]

Can we fallback to global installed prettier bin instead if prettier not found from package.json?

[giltayar]

@JounQin - the problem isn't really that it couldn't find prettier. Prettier is definitely there. Unfortunately, the logs don't say much, except that (in my case at least), it's trying and failing to load prettier from lots of projects in my workspace.

[JounQin]

@giltayar Maybe you're right there. But we sometimes will work on projects without package.json, ruby app for example, it should be supported out of box.

[giltayar]

Definitely! But that's another issue, and not this one... 😊

On Mon, Nov 18, 2019, 07:24 JounQin notifications@github.com wrote:

@giltayar https://github.com/giltayar Maybe you're right there. But we sometimes will work on projects without package.json, ruby app for example, it should be supported out of box.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/prettier/prettier-vscode/issues/1066?email_source=notifications&email_token=AADCORF2TXCEHJRHCFFXMFDQUIRINA5CNFSM4JOJGGRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEJHDQY#issuecomment-554856899, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADCOREISEQRO2N3AEH5E2TQUIRINANCNFSM4JOJGGRA .

[JounQin]

@giltayar You're right again, haha.

[ntotten]

Could somebody provide a sample github repo i can use to duplicate this error. It seems like this is something you are seeing in large monorepos maybe.

[JounQin]

@ntotten Can you try eslint-mdx?

[giltayar]

@ntotten - unfortunately, the repo this happens in is closed-source, so I can't show this. But this is the prettier extension log from there: https://gist.github.com/giltayar/0522c58f252140c79c739abd9c56cb8e

I tried it, BTW, with another monorepo of mine (open-source), but unfortunately there were no problems there.

[tunjioye]

The Failed to load module. Attempted to load prettier from package.json. error notification started after updating to VS Code to version 1.40.1.

For now, you can solve it by setting Prettier Path in your VS Code Settings.

---

https://stackoverflow.com/questions/58866847/in-vs-code-im-getting-this-error-failed-to-load-module-attempted-to-load-pr/58934707#58934707

1. Install Prettier Globally via npm if you have never installed it globally

npm i prettier -g

2. Search & Use the Prettier Path Extension Settings in your VS Code Settings

// You can navigate to VS Code Settings > Extensions > Prettier for all Prettier Extension Settings

3. Update the Prettier Path to your globally installed Prettier.

For Example

/usr/local/lib/node_modules/prettier (Mac OS)

\AppData\Roaming\npm\node_modules\prettier (Windows)

[ntotten]

There seem to be a few different issues going on here.

1) Prettier must be included in the package.json. Not just installed in the node_modules, but listed in the package.json. This is something I may change later, but that is the behavior now.

2) In one of the logs provided I am seeing this error [ERROR - 8:10:32 AM] Outdated version of prettier installed. Falling back to bundled version of prettier. You need to make sure you are using prettier version 1.13 or above otherwise it will fallback to the bundled prettier.

3) Global modules aren't supported yet and never have been. This is also something we might change, but its not supported. As others have noted, you can make them work by setting the path to the global module in the Prettier Path setting.

[JosNun]

Similar problem here. None of the issues mentioned in the previous issue apply. Unfortunately, this is also a closed-source application.

I will note, however, that my stylesheets are in a folder that has a package.json file that isn't for a npm package (different format).

[jedwards1211]

I'm confused, is prettier-vscode using the version of prettier I have installed in the package containing the file being formatted? Want to make sure...since project differ so much in settings, plugins should always use the version of a tool installed in a given project.

[ntotten]

@JosNun In your case that is likely going to be the problem. The extension searches the tree down until we file a package.json. If that package.json contains prettier, the extension uses that, otherwise it will fall back to using the bundled version of prettier. You may want to install prettier as a devDepandancy in that package.json.

[giltayar]

@ntotten all the packages in my vscode workspace have prettier installed as a dev dependency. And yes, they are all mostly updated to latest version of prettier (3.1.x and in two cases 2.7.x).

And the log you saw was probably mine, so something weird is going on here.

[ntotten]

@jedwards1211

is prettier-vscode using the version of prettier I have installed in the package containing the file being formatted?

Yes, it walks down the tree and uses the closest package.json. If that package.json has prettier, it will use that otherwise it will fall back to the bundled version.

[jedwards1211]

whew okay. It seemed that after I updated prettier in my package I had to restart VSCode to get prettier-vscode to use the new installed version.

[giltayar]

Oh, wait. I looked at the versions of eslint-plugin-prettier. My bad.

Yes, I had outdated <1.13 packages in my workspace.

Unfortunately, I upgraded them, and same problem. Here is the new log: https://gist.github.com/giltayar/36aa345c64e222c4006acc3621d3baf7

[ntotten]

One thing to check is if there are encoding issues in either the .prettierrc or package.json see this issue: https://github.com/prettier/prettier-vscode/issues/1082#issuecomment-559071020

I added some additional logging as well in v3.11.0 to report these kinds of errors. Let me know if anyone sees this.

[giltayar]

Nope, sorry. This is my latest (prettier extension 3.11.0) log: https://gist.github.com/giltayar/c5bb12727d5c9bb4adc0cb3b67dd54a8

But I think I know what's going on (in my repo, at least). Some packages in my monorepo are not npm install-ed, because I've never worked on them (my colleagues have), and so I never needed to. Those packages are causing the module loading problem. I have figured it out by looking at the latest logs, which have more information on where the prettier load problem has happened in the monorepo (keep them!).

But this has always been so. Why is the problem popping up now? It's an amalgamation of two problems:

1. The errors were already there, but they were suddenly made visible in VS Code. Not sure whether this is a vscode change or a change in the prettier extension.
2. There was a bug in VS Code that crashed the extension host (https://github.com/microsoft/vscode/issues/84803), and the constant errors from the prettier extension triggered this for some reason. Crashing the extension host makes vscode unusable, which made me look for solutions.

Since the https://github.com/microsoft/vscode/issues/84803 issue has been fixed in the latest vscode release, I still get the error messages, but I can safely ignore them as VS Code continues to to run. For me, this is good enough. I have prettier back! :-)

[giltayar]

Nope, sorry. Still getting host termination exceptions, and only if I enable the prettier extension. Have to disable it yet again... :-(

[ntotten]

@giltayar im not really sure why you are seeing the extension host crash. The “errors” in the prettier extension log are handled and not going to cause a crash. They are simply being logged.

Can you provide any details on what the exception host logs or shows before the crash. I think the errors in the prettier log are probably a false flag and not the actual cause. The only result from those errors should be that formatting doesn’t happen in those parts of the monorepo.

I know your project is closed source, but if you can provide a different repo that can duplicate that issue, that would help.

As is, I don’t have enough information to solve this problem.

[hedefalk]

I get this same error message, not on my js/ts files but only when I save my package.json. prettier is there in a recent version. I've even tried to disable formatting on json but this still happens. These are my relevant workspace settings:

"[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true
    },
    "json.format.enable": false

Seems to me that the plugin has registered itself as a formatter for lots of languages and when going down from package.json it doesn't find itself?

["ERROR" - 10:53:48 AM] Failed to load prettier from ''
Cannot find module 'prettier' from '/Users/viktor.hedefalk/.vscode/extensions/orta.vscode-jest-3.0.2/package.json'
Error: Cannot find module 'prettier' from '/Users/viktor.hedefalk/.vscode/extensions/orta.vscode-jest-3.0.2/package.json'
    at Function.e.exports [as sync] (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:318316)
    at t.ModuleResolver.findPkg (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:245352)
    at t.ModuleResolver.findPkg [as findPkgMem] (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:245710)
    at t.ModuleResolver.requireLocalPkg (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:244427)
    at t.ModuleResolver.getPrettierInstance (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:243539)
    at t.LanguageResolver.getSupportLanguages (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:242247)
    at t.LanguageResolver.allEnabledLanguages (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:241855)
    at t.default.selectors (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:345106)
    at registerFormatter (/Users/viktor.hedefalk/.vscode/extensions/esbenp.prettier-vscode-3.11.0/dist/extension.js:1:344257)
    at l.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:47:207)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:556:763
    at l.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:47:207)
    at t.ExtHostFileSystemEventService.$onFileEvent (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:557:740)
    at f._doInvokeHandler (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:646:285)
    at f._invokeHandler (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:645:999)
    at f._receiveRequest (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:644:664)
    at f._receiveOneMessage (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:643:477)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:641:754
    at l.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:47:207)
    at _.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:187:274)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:798:285
    at l.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:47:207)
    at _.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:187:274)
    at t.PersistentProtocol._receiveMessage (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:191:629)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:188:824
    at l.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:47:207)
    at f.acceptChunk (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:184:737)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:184:89
    at Socket.t (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/services/extensions/node/extensionHostProcess.js:193:68)
    at Socket.emit (events.js:200:13)
    at addChunk (_stream_readable.js:294:12)
    at readableAddChunk (_stream_readable.js:275:11)
    at Socket.Readable.push (_stream_readable.js:210:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:166:17)
["INFO" - 10:53:48 AM] Enabling prettier in workspace 'orta.vscode-jest-3.0.2' for languages:
[
  "javascript",
  "mongo",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "json",
  "jsonc",
  "json5",
  "css",
  "postcss",
  "less",
  "scss",
  "graphql",
  "markdown",
  "mdx",
  "html",
  "vue",
  "yaml"
]
["INFO" - 10:53:48 AM] Enabling prettier for range supported languages
[
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "json",
  "graphql"
]

[dgreuel]

I was having this problem, too. When I tried to install prettier globally, I would get this error:

["INFO" - 9:47:06 AM] Loaded module 'prettier@undefined' from '/Users/dan/.config/yarn/global/node_modules/.bin/prettier'
["ERROR" - 9:47:06 AM] Outdated version of prettier installed. Falling back to bundled version of prettier.

Seems it somehow couldn't detect the version number of the globally installed prettier...

I then realized my project is using yarn pnp, so maybe that's why it couldn't find the prettier from package.json. I did yarn unplug prettier, then created a symlink to the prettier in .pnp/unplugged in the top-level node_modules and it finally worked!

[ctwowt]

Sometimes I just want open files and reading some repo source code rather than run npm install. This repo could using prettier in package.json but I don't want install I just reading source code to study, and I don't want create a .prettierignore file because I often open several repos that cannot for every repo create a .prettierignore, so open files and show warning info to tell me need run npm install is annoying... By the way I really hope can directly setting ignorePattern like eslint config option in ./vscode/.setteing.json rather than create a .prettierignore file

sorry, poor English...

[karthiknvlr]

System Config: OS : Ubuntu 18.04 VSCode version : version 1.40 I am also getting the same issue whenever I opened the below project in VScode. https://github.com/santiq/bulletproof-nodejs.git

In package.json under devDependencies prettier is added

[tunjioye]

@karthiknvlr Have you tried this solution https://stackoverflow.com/questions/58866847/in-vs-code-im-getting-this-error-failed-to-load-module-attempted-to-load-pr/58934707#58934707

[deadcoder0904]

This has been really hectic. Been happening for a couple of weeks & now I got frustrated 🤦‍♂️

Any way to solve this?

@tunjioye your solution didn’t work for me.

I used yarn global instead of npm --global & tried path /usr/local/bin/prettier as that is where yarn installs the binary but still didn’t work :(

[tunjioye]

WOW. I changed my Prettier Path to my yarn global version /usr/local/bin/prettier and it worked. @deadcoder0904 Try running open /usr/local/bin/prettier in your terminal to verify your prettier is installed globally via yarn

[deadcoder0904]

@tunjioye I already did, it’s installed FWIW

[hedefalk]

@tunjioye Just want to point out the obvious - installing globally is very much a workaround. I'm always trying to minimize any kind of global installs on a dev machine to the bare minimum. Prettier is a big no-no to install globally for me. A plugin like this needs to be able to use the prettier version from the module at hand.

[ntotten]

I am really going to need somebody to provide a sample GitHub repo that I can use to reproduce this otherwise it really isn’t clear what is happening. I think this issue has evolved into a discussion of multiple, separate issues. Please provide repro steps and a sample.

[JounQin]

@ntotten I tried to install prettier globally via homebrew, it failed for complaining about outdated version of prettier, but if I switched to install prettier galobally via yarn, it worked without warning tips.

And is eslint-mdx not simple enough for reproduction?

[ntotten]

@JounQin I ran eslint-mdx without any errors. So I am not able to reproduce the problem.

Also, global modules are not supported unless you are setting the prettierPath config to point to them. This extension does not yet automatically detect global modules.

[JounQin]

@ntotten I mean yarn global add prettier works but brew install prettier doesn't work.

I both enabled prettierPath config correctly.

[ntotten]

I am going to close this issue. It has turned into a discussion of what I think are many related issues and I cannot keep up. Please open a new issue with repro steps and a sample project along will all other valid information. Thanks!