Error: Failed to load plugin 'prettier' declared in '.eslintrc.js » @react-native-community/eslint-config': Cannot find module 'eslint-plugin-prettier' Require stack:

[victororlyk]

After installing react-native with npx it throws an error on me with eslint settings in webstorm.

Description

I have tried installing prettier on it's own but it didn't worked

React Native version: 0.65.1

Run react-native info in your terminal and copy the results here. info Fetching system and libraries information... System: OS: macOS 11.5.2 CPU: (8) arm64 Apple M1 Memory: 179.45 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.8.0 - /opt/homebrew/bin/node Yarn: Not Found npm: 7.21.0 - /opt/homebrew/bin/npm Watchman: 2021.08.30.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.0 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: Not Found IDEs: Android Studio: Arctic Fox 2020.3.1 Patch 2 Arctic Fox 2020.3.1 Patch 2 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.1 => 0.65.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. npx react-native some
2. open app in webstorm

Expected Results

Describe what you expected to happen. no errors is shown

Snack, code example, screenshot, or link to a repository:

I haven't changed anything from the app created with npx

[coolguy001tv]

for me, with rn 0.64.2 and @react-native-community/eslint-config@3.0.1 , when yarn install, i got the error:

error An unexpected error occurred: "could not find a copy of prettier to link in C:\code\tt\fatboy\node_modules\@react-native-community\eslint-config\node_modules".

when changing @react-native-community/eslint-config@^2.0.0, i got no errors. It's not a solution, but can bypass this problem temp.

[kendallroth]

Can confirm that this is happening with both 3.0.0 and 3.0.1 of @react-native-community/eslint-config.

[kendallroth]

I should mention that running the linter by itself also throws this error (not just VSCode).

ESLint: 7.32.0

ESLint couldn't find the plugin "eslint-plugin-prettier".

(The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "/Users/kendallroth/Development/payme".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-prettier@latest --save-dev

The plugin "eslint-plugin-prettier" was referenced from the config file in ".eslintrc.js » @react-native-community/eslint-config"

Installing as instructed/recommended that moves the error to a missing prettier config package.

ESLint: 7.32.0

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

The config "prettier" was referenced from the config file in "/Users/kendallroth/Development/payme/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js".

Installing eslint-config-prettier in turn mentions an issue with globals/jest.

ESLint: 7.32.0

Error: .eslintrc.js » @react-native-community/eslint-config#overrides[2]:
    Environment key "jest/globals" is unknown

[kendallroth]

I was unable to "fix" this by downgrading to version 2.0.0 unfortunately. Also of interest, I verified that version 3.0.0 is currently working on my Windows machine; however, the same dependencies does not work on Mac (clean NPM install on both).

[NehrDani]

I can verify that version 3.0.0 works but 3.0.1 does not. Using also eslint-plugin-prettier@^4.0.0 and prettier@^2.4.1 in my project. eslint has version 7.32.0.

[kendallroth]

Further digging revealed that this happened to me after as a side-effect of upgrading to Expo 43 (from 42). I'm trying to figure out which of the included package changes may have impacted the project. The only change made in that commit was a change to package.json (below) and lock file.

       "dependencies": {
-        "@react-native-masked-view/masked-view": "0.2.4",
+        "@react-native-masked-view/masked-view": "0.2.5",
         "@react-navigation/native": "^6.0.2",
         "@react-navigation/stack": "^6.0.7",
-        "expo": "~42.0.1",
-        "expo-linking": "~2.3.1",
-        "expo-splash-screen": "~0.11.2",
-        "expo-status-bar": "~1.0.4",
-        "react": "16.13.1",
-        "react-dom": "16.13.1",
-        "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+        "expo": "^43.0.0",
+        "expo-linking": "~2.4.2",
+        "expo-splash-screen": "~0.13.4",
+        "expo-status-bar": "~1.1.0",
+        "react": "17.0.1",
+        "react-dom": "17.0.1",
+        "react-native": "0.64.2",
         "react-native-gesture-handler": "~1.10.2",
-        "react-native-screens": "~3.4.0",
+        "react-native-safe-area-context": "3.3.2",
+        "react-native-screens": "~3.8.0",
         "react-native-vector-icons": "^8.1.0",
-        "react-native-web": "~0.13.12"
+        "react-native-web": "0.17.1"
       },
       "devDependencies": {
-        "@babel/core": "^7.9.0",
+        "@babel/core": "^7.12.9",
         "@react-native-community/eslint-config": "^3.0.0",
-        "@types/react": "~16.9.35",
-        "@types/react-native": "~0.63.2",
+        "@types/react": "~17.0.21",
+        "@types/react-native": "~0.64.12",
         "eslint": "^7.32.0",
         "prettier": "^2.3.2",
-        "typescript": "~4.0.0"
+        "typescript": "~4.3.5"
       }
     },

[kendallroth]

This is proving to be quite frustrating, as my linting has stopped working entirely in VSCode (and CLI/tests). I will try to create a replica on a new project (from Expo) but would be very curious if anyone would have any ideas about this (can share original project if needed).

[kendallroth]

Created a minimum test case that illustrates the issue, but for the life of me cannot figure out what is going wrong.

package.json

{
  "name": "react-native-eslint-plugin-test",
  "version": "0.1.0",
  "scripts": {
    "lint": "eslint ."
  },
  "dependencies": {
    "expo": "~43.0.0",
    "expo-status-bar": "~1.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.0.0",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "eslint": "^7.32.0",
    "prettier": "^2.4.1",
    "typescript": "~4.3.5"
  },
  "private": true
}

.eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "@react-native-community",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    // Disable ESLint rules that would conflict with Prettier
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "no-console": "warn",
    "prettier/prettier": "warn",
    "prefer-const": "warn",
    "react/display-name": "off",
  },
};

Error:

> eslint .

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "eslint-plugin-prettier".

(The package "eslint-plugin-prettier" was not found when loaded as a Node module from the directory "/Users/kendallroth/Development/eslint-copy-test".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-prettier@latest --save-dev

The plugin "eslint-plugin-prettier" was referenced from the config file in ".eslintrc.js » @react-native-community/eslint-config".

Reminder that installing as it mentions then complains about eslint-config-prettier, then global jest types, and so on (does not fix problem)! It's almost as if the dependencies of the community package are not being installed at all!

[kendallroth]

Ooookay, so to add to the confusion, I tried running the exact setup from @react-native-commnity/eslint-config on both Windows WSL2/Ubuntu (Node 16.6.0, NPM 7.20.6) and Mac (Node 16.7.0, NPM 7.20.3).

# Install dependencies
> npm install --save-dev eslint prettier @react-native-community/eslint-config

# Create ESLint file and copy in from NPM page
> touch .eslintrc

# Create simple TypeScript file with some to be caught by linter
> touch index.ts

# Add ESLint script and run
> npm run lint

For some unknown reason, this succeeded on Windows WSL2/Ubuntu, but failed on Mac! Exact same commands...everything 😱! At this point I am probably going to have to replace this package with the underlying packages, unless anyone has some ideas on why this is different between Linux and Mac. Also curious if anyone else can replicate this issue with the above workflow?

[mohamed-amine-haine]

i had the same probleme. i think there is a trouble with the path of dependency of this package. i fixed it by installing those and his dependencies manually : "eslint-config-prettier" "eslint-plugin-eslint-comments" "eslint-plugin-flowtype" "eslint-plugin-jest" "eslint-plugin-prettier" "prettier"

try to install the same version of packages, you can use npm ls to get the version. and npm install -D package_name>@<version to install specific version.

don't forget to delete package.lock and node_modules if you have some troubles. and don't forget to restart vscode after package installation to allow eslint server to restart.

[matthesjh]

I got the same error after upgrading a project from Node.js 14.18.1 to version 16.13.0. No other changes were made. Installing the aforementioned packages manually fixed the problem.

[abdullah-kasim]

For those using yarn, try npx yarn-deduplicate.

This is probably happening due to duplicate copies of certain libraries.

[igorhart]

I got the same error after upgrading a project from Node.js 14.18.1 to version 16.13.0. No other changes were made. Installing the aforementioned packages manually fixed the problem.

I have downgraded node from 16.13.0 to 14.18.1 to fix the issue. Do you think it's better to manually install all the missing packages instead? (both are just a workaround for the broken default react-native project init on Mac)

[fiznool]

Looks like this is related to #32528. Try downgrading ESLint to v7, it fixed the issue for me.

npm i eslint@7

[thecodecafe]

Hi, this might be unrelated, but I noticed something after moving from React Native 0.63 to 0.66 all the red lines and auto-formatting I get from Prettier suddenly disappeared, how can I get them back? I use VS Code and they really helped me keep my code organised.

[SimonChaumet]

The package isn't found because it is placed underneath @react-native-community/eslint-config instead of the root node_modules. don't know why

[LunatiqueCoder]

Using yarn install instead of npm fixed the issue for me....

[SimonChaumet]

Using yarn install instead of npm fixed the issue for me....

I'm using yarn but it didn't work, what I don't understand is that when using the default project created by react native cli it works

[AmauryLiet]

as @SimonChaumet stated: "the package isn't found because it is placed underneath @react-native-community/eslint-config instead of the root node_modules" this happens when there are multiple versions of prettier installed on your project (you can find them all in your yarn.lock by searching for "prettier@")

For instance, a faulty yarn.lock:

prettier@^2.0.2:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
  integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==

prettier@^2.5.1:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==

The first line (v2.1.2) comes from @react-native-community/eslint-config, the second (v2.5.1) from my package.json

To make sure that only 1 version is installed:

• ensure that all prettier requirements (the version in your package.json and the version of all libs using prettier) are compatible.
• remove all the resolution line from your yarn.lock (these are the lines above)
• run yarn again
• check that it finished successfully, and that your yarn.lock file is updated:

prettier@^2.0.2, prettier@^2.5.1:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==

[Yrsafam]

I think it's all caused by peer dependency in npm >=7. In my case, installing dependencies in the old npm 4-6 mode helped, i.e.:

1) Remove node_modules, package-lock.json 2) npm install --legacy-peer-deps

Article about dependencies:

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.