Failed to load 'react-hooks'

[shaunjanssens]

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:

1. Create React app with npx create-react-app app
2. Configure ESLint and Prettier extensions in VSCode
3. 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.

[danikkks]

same problem

• windows 10
• create-react-app v3.1.1
• vscode version 1.37.1

[xinkule]

same here

• macOS Mojave 10.14.5
• vscode 1.36.1
• prettier-vscode 1.9.0
• CRA 3.1.1

I guess the problem lies on the eslint version 6.x, it's incompatible with the current version of prettier-vscode.

[danihazler]

same problem here

[jaegz]

Also experiencing this issue

• windows 10
• create-react-app 3.0.1
• vscode 1.37.1
• prettier 1.9.0

[rrlevy]

Same problem here

[gregkonush]

also experiencing this problem:

• macOS Mojave 10.14.6
• vscode 1.37.1
• prettier 1.9.0

[cemujax]

Same problem here

• windows 10 64bit
• vscode 1.37.1
• prettier1.9.0
• CRA 3.1.1

[YYvanYang]

Same problem here

windows 10 64bit
vscode 1.37.1
CRA 3.1.0

[agusterodin]

Must be a vscode issue

[eclecticjohny]

Same as @cemujax here

• windows 10 64bit
• vscode 1.37.1
• prettier1.9.0
• CRA 3.1.1

[lsw8168]

same problem

windows 10
create-react-app v3.1.1
vscode version 1.37.1

[WeiShengv99]

prettier 1.9.0
vscode 1.37.1
eslint-plugin-vue and eslint last version

I get Similar problem
i got the error of 'Failed to load plugin 'vue' declared in........cant get module eslint-plugin-vue'
but i already install it both as a dev dependency and global dependency.

[tylergraf]

facebook/react#16531 (comment)

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

[yogathanh99]

@tylergraf I do like you talk but I can't fix this issue

[deadcoder0904]

Yep facing same issue

[tim-sheung]

same

[Jonny15t]

I was able to correct this issue by deleting eslint-config-react-app from node_modules and reinstalling the newest version via npm i --save-dev eslint-config-react-app.

OS: Windows 10
CRA: v3.1.1
VSCode: v1.37.1

[izayl]

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

[yogathanh99]

Thanks, @izayl. I fixed this issue like you

[agusterodin]

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

[ntotten]

Duplicate of #870

[cburkins]

Also disabled Prettier ESLint integration to fix the issue. When I disabled it (vis User Settings panel), it was marked as deprecated in orange text. Now when I go back to look at it, I'm pretty sure the setting is no longer there. Did a bit of reading on this as well: https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

[agusterodin]

Yeah I just narrowed down through trial and error that prettier eslint will not work on any project with react-scripts later than 3.0.1

Pretty devastating considering my entire workflow revolves around using this. So painful developing without it. I could imagine a lot of other people work this way as well.

[opolancoh]

I think it's a problem generating the template with NPX when you execute npx create-react-app app. If you use create-react-app app the problem doesn't occurs.

[dvj1988]

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:

1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react-hooks' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react-hooks' isn't installed correctly.

[KasparasGud]

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

npm i -g eslint-plugin-react-hooks

and everything is back to normal 💪

[nick-gaudreau]

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

[harrytran998]

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]

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:

1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react-hooks' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react-hooks' isn't installed correctly.

It worked! Thanks @diljitvj

[eltNEG]

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

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

[thealexandrelara]

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.

[tupizz]

Here too... Any workaround?

[dvj1988]

@tupizz Try this => #910 (comment)

[neyosoft]

lint.autoFixOnSave":

This setting works for me. There is an update on prettier website also about the deprecation and changes. Besides that, I installed 'eslint-plugin-react-hooks' globally.

[floroz]

here as well, I solved it by installing the 'eslint-plugin-react-hooks' npm package locally as dev dependency
"eslintConfig": { "extends": "react-app", "plugins": [ "react-hooks" ] },

[skube]

@floroz That didn't seem to work for me :(

[floroz]

@floroz That didn't seem to work for me :(

I have gone through several steps:

1. Remove all eslint and prettier global npm packages
2. Remove all local eslint and prettier packages and plugins
3. Remove VS Code Extensions ESLint and Prettier
4. Reinstall VS Code ESLint extensions
5. If you are using Create-React-App look at the 'Output' for extensions error
6. Gradually install each package and monitor errors in the output.

[github-actions]

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.