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

victororlyk · 2021-09-10T08:51:15Z

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.

npx react-native some
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

The text was updated successfully, but these errors were encountered:

coolguy001tv · 2021-09-27T08:22:07Z

for me, with rn 0.64.2 and @react-native-community/[email protected] , 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 · 2021-11-03T09:39:54Z

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

kendallroth · 2021-11-03T09:45:48Z

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 · 2021-11-03T10:08:32Z

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 · 2021-11-03T13:51:05Z

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 · 2021-11-04T10:10:05Z

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 · 2021-11-04T10:58:20Z

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 · 2021-11-04T12:29:54Z

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 · 2021-11-04T12:43:53Z

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 · 2021-11-05T10:47:28Z

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 <package_name> to get the version. and npm install -D <package_name>@ 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 · 2021-11-05T11:54:39Z

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 · 2021-11-12T10:37:44Z

For those using yarn, try npx yarn-deduplicate.

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

igorhart · 2021-11-13T17:40:14Z

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 · 2021-11-18T12:24:47Z

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

npm i eslint@7

thecodecafe · 2021-11-21T13:56:25Z

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 · 2021-11-23T14:33:06Z

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 · 2021-11-29T12:22:53Z

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

SimonChaumet · 2021-11-29T14:20:26Z

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 · 2021-12-17T17:06:05Z

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 · 2021-12-24T09:48:48Z

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

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

Article about dependencies:

github-actions · 2024-03-15T05:41:08Z

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 · 2024-03-22T05:50:48Z

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

victororlyk added the Needs: Triage 🔍 label Sep 10, 2021

LunatiqueCoder mentioned this issue Nov 29, 2021

@mikehardy/lint battles LunatiqueCoder/luna#33

Merged

megacherry mentioned this issue Jul 20, 2022

[eslint-config] Environment key "jest/globals" is unknown #33955

Closed

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 15, 2024

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Mar 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

victororlyk commented Sep 10, 2021

coolguy001tv commented Sep 27, 2021 •

edited

Loading

kendallroth commented Nov 3, 2021 •

edited

Loading

kendallroth commented Nov 3, 2021 •

edited

Loading

kendallroth commented Nov 3, 2021

NehrDani commented Nov 3, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021 •

edited

Loading

mohamed-amine-haine commented Nov 5, 2021

matthesjh commented Nov 5, 2021

abdullah-kasim commented Nov 12, 2021 •

edited

Loading

igorhart commented Nov 13, 2021 •

edited

Loading

fiznool commented Nov 18, 2021

thecodecafe commented Nov 21, 2021

SimonChaumet commented Nov 23, 2021

LunatiqueCoder commented Nov 29, 2021

SimonChaumet commented Nov 29, 2021

AmauryLiet commented Dec 17, 2021

Yrsafam commented Dec 24, 2021

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 22, 2024

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

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

Comments

victororlyk commented Sep 10, 2021

Description

React Native version: 0.65.1

Steps To Reproduce

Expected Results

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

coolguy001tv commented Sep 27, 2021 • edited Loading

kendallroth commented Nov 3, 2021 • edited Loading

kendallroth commented Nov 3, 2021 • edited Loading

kendallroth commented Nov 3, 2021

NehrDani commented Nov 3, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021

kendallroth commented Nov 4, 2021 • edited Loading

mohamed-amine-haine commented Nov 5, 2021

matthesjh commented Nov 5, 2021

abdullah-kasim commented Nov 12, 2021 • edited Loading

igorhart commented Nov 13, 2021 • edited Loading

fiznool commented Nov 18, 2021

thecodecafe commented Nov 21, 2021

SimonChaumet commented Nov 23, 2021

LunatiqueCoder commented Nov 29, 2021

SimonChaumet commented Nov 29, 2021

AmauryLiet commented Dec 17, 2021

Yrsafam commented Dec 24, 2021

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 22, 2024

coolguy001tv commented Sep 27, 2021 •

edited

Loading

kendallroth commented Nov 3, 2021 •

edited

Loading

kendallroth commented Nov 3, 2021 •

edited

Loading

kendallroth commented Nov 4, 2021 •

edited

Loading

abdullah-kasim commented Nov 12, 2021 •

edited

Loading

igorhart commented Nov 13, 2021 •

edited

Loading