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?

Answer 1

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)

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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:

1. Open VSCode and type cmd + shift + p to open the Command Palette.
2. Type Prettier: Reset Module Execution State
3. 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.

Answer 8

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.

Answer 9

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
}