prettier-vscode: Failed to load 'react-hooks'

Failed to format React files

I’m using VSCode - insiders and Remote - SSH to develop on a remote machine. When using create-react-app, Prettiers fails to format the files and gives an error.

Steps To Reproduce:

Create React app with npx create-react-app app
Configure ESLint and Prettier extensions in VSCode
Save file

Expected result

Formatted file.

Actual result

Error by Prettier:

8/16/2019, 9:45:43 AM:
----------------------
Failed to load plugin 'react-hooks' declared in 'CLIOptions'/home/shaunjanssens/projects/gotoo/webapp/src/App.js:: Cannot find module 'eslint-plugin-react-hooks'
Require stack:
- /home/shaunjanssens/__placeholder__.js

Additional information

VS Code Version: 1.38.0-insider

Prettier & Prettier Plugin Version: 1.18.2 (installed on server) / 1.9.0

OS and version: Mac OS and Ubuntu 18.04 (remote development)

React-scripts: 3.1.1

settings.json

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "react",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "prettier.eslintIntegration": true,
  "prettier.singleQuote": true,
  "prettier.semi": false
}

I already tried to install eslint-plugin-react-hooks both as a dev dependency and global on server.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 31
Comments: 38 (1 by maintainers)

Commits related to this issue

re-add eslint-plugin-react-hooks (required for some reason https://github.com/prettier/prettier-vscode/issues/910) — committed to calvium/calvium-hooks-web by benvium 5 years ago
Remove calvium setup and add useLocalStorage (#4) * add the useLocalStorage hook * re-add tests * remove calvium setup (fails at the moment) * re-add eslint-plugin-react-hooks (required for ... — committed to calvium/calvium-hooks-web by benvium 5 years ago

Most upvoted comments

I resolve this problem use "prettier.eslintIntegration": false in my VSCode config

+72

izayl on Aug 23, 2019

prettier.eslintIntegration is deprecated so I removed it from my VSCode settings

According to Prettier’s documentation it’s recommended to use the ESLint or TSLint extensions directly so I just use "eslint.autoFixOnSave": true in my VSCode config and it is working well.

+30

thealexandrelara on Aug 31, 2019

Changed prettier.eslintIntegration": true to "prettier-eslint.eslintIntegration": true in settings.json

+12

nick-gaudreau on Aug 29, 2019

In my case ES lint was installed globally so I resolved it by installing the ‘eslint-plugin-react-hooks’ package globally.

This is the ES lint error report

This can happen for a couple of reasons:

The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).

If ESLint is installed globally, then make sure ‘eslint-plugin-react-hooks’ is installed globally as well.

If ESLint is installed locally, then ‘eslint-plugin-react-hooks’ isn’t installed correctly.

dvj1988 on Aug 27, 2019

https://github.com/facebook/react/issues/16531#issuecomment-523620795

rm -rf node_modules && npm i and then restart vscode fixed it for me.

tylergraf on Aug 22, 2019

@diljitvj Thanks ! Installed the ‘eslint-plugin-react-hooks’ globally with

npm i -g eslint-plugin-react-hooks

and everything is back to normal 💪

KasparasGud on Aug 27, 2019

A temporary I did was to remove the eslintConfig in my package.json

"eslintConfig": {
     "extends": "react-app"
   },

eltNEG on Aug 31, 2019

Changed prettier.eslintIntegration": true to "prettier-eslint.eslintIntegration": true in settings.json @nick-gaudreau When I set that in settings.json => Unknown Configuration Setting => Not working!

harrytran998 on Aug 30, 2019

Thanks, @izayl. I fixed this issue like you

yogathanh99 on Aug 23, 2019

RIP productivity and sanity at work this week. Hope someone finds a proper fix

agusterodin on Aug 24, 2019