In VS Code, I'm getting this error, 'Failed to load module. Attempted to load prettier from package.json'

Question

When I'm using VS Code and open up a project, I get this notification in the bottom right corner:

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have runnpm installAttempted to load prettier from package.json.

Source: Prettier Code Format (Extension)

Running npm install doesn't resolve this. Anyone have any idea why that is or what I can do to fix it?

It seems like some path is broken on my machine or something is missing. We have a package.json with a script to run prettier and a linter. Running the script from the package.json file doesn't apply prettier but if I format it myself (option+shift+f on a mac) it works. So bizarre and annoying having to manually format each file. — ghostagent151, Nov 14 '19 at 22:51
This appears to be a fairly recent "addition" to VS Code. Despite using prettier in the past as well, we haven't observed this issue. I don't from which version of VS Code onward this became a problem. — Manfred, Nov 16 '19 at 03:19
Having the same issue since a few days ago. No proxy or firewall - something broke prettier in the latest VS Code update — Hemal, Nov 19 '19 at 00:57
This is the related github issue. They are looking for more information on this issue (and if available a repo that can be shared). https://github.com/prettier/prettier-vscode/issues/1066 — Kasper, Nov 19 '19 at 10:14
The `Failed to load module. Attempted to load prettier from package.json.` error notification is highly disturbing and it started after updating to VS Code to version `1.40.1`. I have shared a solution that involves setting your `Prettier Path` in VS Code Settings — Tunji Oyeniran, Nov 19 '19 at 13:04

score 86 · Accepted Answer · answered Nov 19 '19 at 12:59

86

This is a solution that worked for me

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)

answered Nov 19 '19 at 12:59

Tunji Oyeniran

3,948
1
18
16

I've installed Prettier globally. When I go into VS Code settings, I search for `Prettier Path`. I see 2 options here, `Prettier:Config Path` and `Prettier: Prettier Path`. I'm using a mac. Should i add `/usr/local/lib/node_modules/prettier` to both paths or just the first? – ghostagent151 Nov 19 '19 at 19:44
1

@ghostagent151 just the last one "Prettier: Prettier Path" as per the screenshot. – donovan Nov 20 '19 at 02:12
Here is another issue I am seeing. If I download the prettier extension in vs code, I have my settings set up so that on save it automatically applies prettier to my code. However, there seems to be two different versions of prettier being applied. If I run `npm run prettier` from the command line, for example, variables that have strings with double quotes are converted to single quotes. If I save and the auto format is applied, they are converted to double quotes. Not sure what is happening with that. – ghostagent151 Nov 21 '19 at 16:39
For now, disabling the prettier extension from VS code in workspace settings, lets me run `npm run prettier` from the command line. (This works after having globally installed prettier). I'm not sure if this is a separate issue, I'll probably need to create a different post and ask there to see why my vs code extension of prettier is applying a different format than my globally installed version. – ghostagent151 Nov 21 '19 at 16:43
1

@ghostagent151 This is a different issue. Running `npm run prettier` uses the local prettier in your project `node_modules` if a `package.json` exists in the project. My advise is you turn off VS Code `formatOnSave` if you will be using custom formatting rules for your project. To avoid the format overwriting. – Tunji Oyeniran Nov 21 '19 at 19:25
Just want to point out - there is no `Prettier Path` extension. Only `Prettier`. Click on the little gear icon in the bottom right-hand corner after searching for `Prettier`, and configure extension settings. Then scroll down to `Prettier Path` and then add the path `/usr/local/lib/node_modules/prettier` for mac or `\AppData\Roaming\npm\node_modules\prettier` for Windows. – HappyHands31 Nov 23 '19 at 02:07
3

Your path to your globally installed modules will differ depending not only on the OS but how you installed npm (i.e nvm, etc). An easy way to get the path is to run `npm root -g` – BoDeX Dec 09 '19 at 05:59
In the Devconainer I just pasted the suggested path (written in the VSCode settings) – Julian Jun 11 '23 at 11:00
1

This worked for me and I'm on WSL2. I used `npm root -g` as mentioned above to confirm my file path. Pasted the output exactly as is into the Prettier Path VScode settings field. – Lushawn Jun 13 '23 at 08:00

score 8 · Answer 2 · answered Jun 12 '23 at 10:30

8

In my case i run prettier on WSL Ubuntu and none of the above solutions worked. Downgrading the Prettier VS Code Extension from Version 9.13.0 to 8.2.0 solved the problem for me.

In my case prettier is installed in the project node_modules and not globally.

answered Jun 12 '23 at 10:30

TheRobinio

81
1
2

9

I have the same environment as you. This is a new [issue](https://github.com/prettier/prettier-vscode/issues/3020#issuecomment-1584068844) with vscode 1.79.0 There is another easier workaround: * create / add to your project's lolcal .vscode/settings.json * this config: "prettier.prettierPath": "./node_modules/prettier" – Getsuga Jun 12 '23 at 14:03
@Getsuga your fix actually worked best in my use case as I'm working with Astro which uses it's own prettier config so installing globally didn't work for me – Lushawn Jun 14 '23 at 11:19
@Getsuga you should promote your comment to an answer, as it fixed this problem for me today. Also, it's annoying to have to tell prettier where it is. – monsto Jun 14 '23 at 16:04
1

Update from me: the fix by @Getsuga stopped working for me (for an unknown reason). I downgraded my VS code prettier extension to v9.13.0 from the latest version and it now works again – Lushawn Jun 26 '23 at 12:38
Downgrading to 9.13.0 worked for me. – John Harding Aug 03 '23 at 19:07
Downgrading to 9.13.0 worked for me too. – Vikrant Aug 11 '23 at 20:20

score 4 · Answer 3 · answered Jun 23 '23 at 09:05

4

I had prettier installed as a VSCode Extension and this solution worked for me:

I had to remove the Prettier Path in the VSCode settings. For that click on the coq icon and press reset.

answered Jun 23 '23 at 09:05

sakramento

369
5
16

Thank you! This is the only one that worked for me. – BahaaZidan Aug 31 '23 at 16:39

score 3 · Answer 4 · edited Jan 23 '20 at 13:30

3

When setting up Prettier it is important to configure it per-project. Not every project uses the same code style, thus it is important to respect the style of whatever project you are currently working in.

The demo repo bahmutov/prettier-config-example has two subfolders, each with its distinct code style, enforced by Prettier. In reality, each of your repos will have its style; I am using subfolders in order to keep the example simple.

npm install --save-dev --save-exact prettier

edited Jan 23 '20 at 13:30

Aditya

783
1
8
25

answered Jan 23 '20 at 11:42

Shanwaz Ghulam

31
1

Is `--save-exact` truly necessary here? Also, +1 for **explicit* install/setup. Global/implicit setup and assumptions will be impactful when you forget that it's out there. – monsto Jun 14 '23 at 16:03

score 2 · Answer 5 · edited Jun 20 '20 at 09:12

Update

It now works for me with prettier-vscode 4.1.1 and prettier 2.0.4, give it a try. I can either use the bundled or locally installed version of prettier.

Notable changes:

[4.0.0] Updated prettier to 2.0
[4.1.0] Added configuration option withNodeModules to enable processing of files in the node_modules folder [default: false]
[4.1.0] Support loading Prettier from node_modules even if it doesn't appear as a direct dependency in a package.json

Original post

I encountered this problem when inspecting the source code of an external package under node_modules.

A workaround is to remove the prettier entry in package.json of this package - no local/global prettier install necessary. Example:

{
  "devDependencies": {
    ...
    "prettier": "^1.19.1", // remove this line completely
  },
}

Keep the package.json valid - no trailing comma, don't just comment the line out. The reason why it works is:

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. Link

My guess is, that the extension wants to use prettier from the package, even if it is devDependencies.

There should be no harm to drop the devDependency from a package in node_modules. This also makes it possible to use the prettier version bundled with prettier-vscode (no install necessary).

score 2 · Answer 6 · answered Apr 07 '20 at 19:27

2

Tried all the solutions provided in here, didn't help. Updating Visual Studio Code fixed this issue.

answered Apr 07 '20 at 19:27

Psy

164
1
8

score 2 · Answer 7 · answered Apr 21 '21 at 09:51

What @tunji-oyeniran said worked for me. I installed prettier globally, like he said:

npm i prettier -g

Then I looked inside my computer to find it

I saw using pwd command that the path is correct, then I moved to vscode and I looked for that extinsion path:

I restarted the vscode and I saw that formating code is working.

This si my settings.json:

{
    "editor.minimap.enabled": false,
    "editor.fontSize": 12,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "material-icon-theme",
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top",
    "[javascript]": {
        // "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true
    },
    "workbench.colorTheme": "Monokai",
    "window.zoomLevel": 0,
    "editor.columnSelection": false,
    "explorer.compactFolders": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "liveServer.settings.donotVerifyTags": true,
    // "javascript.format.enable": true,
    "prettier.prettierPath": "/usr/local/lib/node_modules/prettier",
}

The prettier path was added automatically here, in this settings.json.

score 2 · Answer 8 · answered Jun 16 '23 at 13:47

I was getting the same problem and tried all the steps above without a solution. My Prettier vscode extension was ignoring config files in the end.

For me the issue was with the Prettier extension in Visual Studio Code, as it fails to locate the local .prettierrc configuration file even when it exists... Although you can attempt to set the file path manually at settings, the extension continuously defaults to the Visual Studio Code settings. Therefore, the simplest solution is to add the following line to the .vscode/settings.json file: "prettier.configPath": ".prettierrc". To make sure, just add this complete config file:

{   
  "editor.defaultFormatter": "esbenp.prettier-vscode",   
  "editor.formatOnSave": true,   
  "editor.formatOnPaste": false,   
  "prettier.useEditorConfig": false,   
  "prettier.useTabs": false,   
  "prettier.configPath": ".prettierrc" 
}

score 1 · Answer 9 · answered Nov 21 '19 at 03:17

I just ran into this and discovered I had a syntax error in my package.json file. There was a trailing comma on one line, and that alone seemed to be the root cause for me.

I noticed this because I saw the following output when trying to run some Angular tests:

C:\... [feature/migrate-away-from-angular-http +2 ~6 -0 | +0 ~5 -0 !]> ng test
10% building 3/3 modules 0 active20 11 2019 21:11:18.638:WARN [karma]: No captured browser, open http://localhost:9876/
20 11 2019 21:11:19.575:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
20 11 2019 21:11:19.576:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
20 11 2019 21:11:19.594:INFO [launcher]: Starting browser Chrome

ERROR in ./src/app/app.component.spec.ts
Module not found: SyntaxError: C:\...\package.json (directory description file): SyntaxError: C:\...\package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 167
 @ ./src/app/app.component.spec.ts 7:31-75
 @ ./src sync \.spec\.ts$
 @ ./src/test.ts
ERROR in ./src/app/app.component.ts

score 1 · Answer 10 · answered Apr 21 '21 at 10:04

Alternative Solution (without global installation of prettier)

If you have a project with a locally installed prettier (e.g. via npm install -D prettier), you don't want to add it globally.

Maybe you just clicked "Do not allow" when VSCode asked you, if you want to allow a local installation of prettier run with the installed extension.

In that case, the solution is:

Open VSCode and type cmd + shift + p to open the Command Palette.
Type Prettier: Reset Module Execution State
Then just save your file again and VSCode will ask you, if you want to allow to run prettier. There you want to select Allow everywhere.

Sardar Faisal · Answer 11 · 2023-06-26T10:30:12.493

1

Solution 1

Preferences -> Settings

Search for

prettier path

In the below option write the name of the prettier file:

Prettier: Prettier Path

Path to the prettier module

I have .prettierrc as the file name.

Here is an example file .prettierrc:

{
    "useTabs": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 120
}

Solution 2 There is some strange and complex setup / configuration for prettier which I cannot figure out. Therefore, to format the files using prettier I use the command:

yarn --cwd /path/to/folder run format

edited Jun 26 '23 at 10:30

answered Mar 14 '22 at 09:13

Sardar Faisal

594
5
20

Solution 1 worked for me, did not even need to restart anything, it picked it up right away. – Serj Jun 26 '23 at 18:10

score 0 · Answer 12 · answered Dec 10 '19 at 12:02

0

Fixed this issue by doing npm install globally.

I had this issue when I cleaned my node_nodules. I had eslint along with prettier globally installed. And when I deleted the node_modules this error stated showing up.

answered Dec 10 '19 at 12:02

vikrantnegi

2,252
5
24
35

score -1 · Answer 13 · answered Aug 21 '23 at 09:35

-1

disable the prettier extension then enable it again then Reload vscode with : Developer: Reload window, fix the problem for me

answered Aug 21 '23 at 09:35

Flamingo

322
1
11

In VS Code, I'm getting this error, 'Failed to load module. Attempted to load prettier from package.json'

13 Answers13

Update

Original post

Alternative Solution (without global installation of prettier)

Linked