Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'

Question

Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'

DaniAkash opened this issue 5 years ago · comments

Summary

Unable to format files in my react native project. Whenever I try to format document I am getting an error message but I'm unable to reproduce it for any other project.

Github Repository to Reproduce Issue

Unable to reproduce the issue. Only happens in a private project

Steps To Reproduce:

Open the required file
Click cmd+shift+P and select format document

Expected result

The document should be formatted

Actual result

Couldn't format the document

Additional information

VS Code Version:
1.41.1

Prettier Extension Version:
3.18.0

OS and version:
Mac OS 10.15

Prettier Log Output

["INFO" - 12:51:56 PM] Loaded module 'prettier@1.19.1' from '/Users/apple/Documents/react-native/myProject/node_modules/prettier/index.js'
["INFO" - 12:51:58 PM] Formatting /Users/apple/Documents/react-native/myProject/Screens/BookingsHomeScreen/Components/BookingAccordion/Components/PassSection.js
["INFO" - 12:51:58 PM] Loaded module 'prettier@1.19.1' from '/Users/apple/Documents/react-native/myProject/node_modules/prettier/index.js'
["INFO" - 12:51:58 PM] Using ignore file (if present) at /Users/apple/Documents/react-native/myProject/.prettierignore
["INFO" - 12:51:58 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 12:51:58 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 12:51:58 PM] Prettier Options:
{
  "filepath": "/Users/apple/Documents/react-native/myProject/Screens/BookingsHomeScreen/Components/BookingAccordion/Components/PassSection.js",
  "parser": "babel",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf"
}
["INFO" - 12:51:58 PM] Loaded module 'prettier-eslint@unknown' from '/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js'
["INFO" - 12:51:58 PM] Formatting using 'prettier-eslint'
["ERROR" - 12:51:58 PM] Error formatting document.
Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'
Require stack:
- /__placeholder__.js
Error: Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'
Require stack:
- /__placeholder__.js
	at Function.Module._resolveFilename (internal/modules/cjs/loader.js:627:15)
	at Function.resolve (internal/modules/cjs/helpers.js:21:19)
	at Object.resolve (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/shared/relative-module-resolver.js:44:50)
	at ConfigArrayFactory._loadPlugin (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:845:39)
	at /Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:734:33
	at Array.reduce (<anonymous>)
	at ConfigArrayFactory._loadPlugins (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:730:22)
	at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:554:32)
	at _normalizeObjectConfigDataBody.next (<anonymous>)
	at ConfigArrayFactory._normalizeObjectConfigData (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:491:20)
	at _normalizeObjectConfigData.next (<anonymous>)
	at createConfigArray (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:307:25)
	at ConfigArrayFactory.create (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:362:16)
	at createCLIConfigArray (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:133:47)
	at new CascadingConfigArrayFactory (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:200:29)
	at new CLIEngine (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cli-engine.js:549:36)
	at getESLintCLIEngine (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/utils.js:401:12)
	at eslintFix (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js:151:53)
	at format (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js:119:10)
	at /Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.18.0/dist/extension.js:1:351860
	at t.default.safeExecution (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.18.0/dist/extension.js:1:352534)
	at t.default.<anonymous> (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.18.0/dist/extension.js:1:351834)
	at Generator.next (<anonymous>)
	at s (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.18.0/dist/extension.js:1:346304)
["INFO" - 12:51:58 PM] Formatting completed in 59.06898ms.

Nathan Totten · Answer 1 · Fri Jan 10 2020 05:28:13 GMT+0800 (China Standard Time)

Can you confirm you have eslint-plugin-react-native installed?

Dani Akash · Answer 2 · Fri Jan 10 2020 09:09:57 GMT+0800 (China Standard Time)

I'm having eslint-plugin-react-native@3.6.0 installed

my package.json file:

  "dependencies": {
    "@react-native-community/art": "1.0.1",
    "@react-native-community/async-storage": "^1.5.1",
    "@react-native-community/cameraroll": "^1.0.5",
    "@react-native-community/geolocation": "2.0.2",
    "@react-native-community/netinfo": "^4.1.1",
    "@react-native-community/viewpager": "^2.0.1",
    "@segment/analytics-react-native": "1.1.0",
    "@sentry/react-native": "^1.0.5",
    "country-data": "^0.0.31",
    "d3-shape": "^1.2.0",
    "intl": "^1.2.5",
    "libphonenumber-js": "1.7.9",
    "lodash": "^4.17.5",
    "lottie-ios": "3.1.3",
    "lottie-react-native": "3.3.2",
    "mobx": "5.15.0",
    "mobx-persist": "^0.4.1",
    "mobx-react": "6.1.4",
    "mobx-utils": "5.5.2",
    "moment": "^2.22.1",
    "moment-range": "^4.0.1",
    "number-to-words": "^1.2.4",
    "prop-types": "^15.7.2",
    "react": "16.8.6",
    "react-native": "0.61.2",
    "react-native-animatable": "^1.3.1",
    "react-native-app-settings": "^2.0.1",
    "react-native-bootsplash": "^1.0.0",
    "react-native-card-stack-swiper": "^1.1.0",
    "react-native-circular-progress": "^1.3.0",
    "react-native-collapsible": "1.5.1",
    "react-native-config": "^0.12.0",
    "react-native-dash": "^0.0.9",
    "react-native-device-info": "2.1.2",
    "react-native-draftjs-editor": "0.0.2",
    "react-native-fast-image": "7.0.2",
    "react-native-file-viewer": "^2.0.0",
    "react-native-firebase": "5.5.5",
    "react-native-flip-view-next": "^1.0.0",
    "react-native-freshchat-sdk": "2.2.0",
    "react-native-geolocation-service": "^3.1.0",
    "react-native-gesture-handler": "1.5.0",
    "react-native-htmlview": "0.15.0",
    "react-native-image-crop-picker": "0.25.0",
    "react-native-inappbrowser-reborn": "^2.0.4",
    "react-native-iphone-x-helper": "1.2.0",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-keychain": "3.0.0",
    "react-native-lightbox": "^0.8.0",
    "react-native-linear-gradient": "2.5.4",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal": "11.5.3",
    "react-native-parallax-scroll-view": "0.21.3",
    "react-native-particles": "^0.0.7",
    "react-native-pdf": "5.1.4",
    "react-native-permissions": "^2.0.2",
    "react-native-photo-view": "git://github.com/DaniAkash/react-native-photo-view.git#22e4ff8847dc2c800d216011f981b769edf1daa0",
    "react-native-progress": "git://github.com/DaniAkash/react-native-progress.git#393452c9c62a442e48854cff07a3411ed022239c",
    "react-native-ratings": "^6.0.0",
    "react-native-reanimated": "1.4.0",
    "react-native-responsive-dimensions": "2.0.1",
    "react-native-restart": "0.0.13",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-scrollable-tab-view": "git://github.com/ptomasroos/react-native-scrollable-tab-view#7118e9845d48b091dc19e3f2f2a29d460a0cdb38",
    "react-native-share": "^2.0.0",
    "react-native-simple-radio-button": "^2.7.3",
    "react-native-simple-toast": "^0.1.1",
    "react-native-sound": "0.11.0",
    "react-native-svg": "9.5.1",
    "react-native-svg-charts": "^5.0.0",
    "react-native-swipe-list-view": "^1.3.0",
    "react-native-tts": "2.0.0",
    "react-native-vector-icons": "5.0.0",
    "react-native-webengage": "1.1.1",
    "react-native-webview": "5.12.1",
    "react-navigation": "4.0.10",
    "react-navigation-drawer": "2.3.3",
    "react-navigation-stack": "^1.10.2",
    "react-navigation-tabs": "^2.5.6",
    "rn-fetch-blob": "0.10.16",
    "title-case": "^2.1.1",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/runtime": "^7.5.4",
    "@emotion/core": "^10.0.17",
    "@react-native-community/eslint-config": "^0.0.5",
    "@storybook/react-native": "5.2.5",
    "@types/jest": "^24.0.22",
    "@types/lodash": "^4.14.144",
    "@types/react": "^16.9.11",
    "@types/react-native": "^0.60.22",
    "@types/react-native-vector-icons": "^6.4.4",
    "@types/react-test-renderer": "^16.9.1",
    "@typescript-eslint/parser": "^2.9.0",
    "babel-jest": "^24.8.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-preset-react-native": "^5.0.1",
    "emotion-theming": "^10.0.17",
    "eslint": "^6.1.0",
    "eslint-detailed-reporter": "^0.8.0",
    "eslint-plugin-jest": "23.0.5",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-tsc": "^1.2.0",
    "husky": "3.1.0",
    "jest": "^24.9.0",
    "jetifier": "1.6.4",
    "jsonfile": "^5.0.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "prettier": "1.19.1",
    "prettier-eslint": "9.0.0",
    "pretty-quick": "2.0.1",
    "react-native-testing-library": "^1.11.1",
    "react-test-renderer": "16.8.6",
    "typescript": "^3.7.2"
  }

in my yarn.lock file I have:

eslint-plugin-react-native@3.6.0:
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/eslint-plugin-react-native/-/eslint-plugin-react-native-3.6.0.tgz#7cad3b7c6159df6d26fe3252c6c5417a17f27b4b"
  integrity sha512-BEQcHZ06hZSBYWFVuNEq0xuui5VEsWpHDsZGBtfadHfCRqRMUrkYPgdDb3bpc60qShHE83kqIv59uKdinEg91Q==
  dependencies:
    eslint-plugin-react-native-globals "^0.1.1"

Suhail Mohamed · Answer 3 · Fri Jan 17 2020 19:16:02 GMT+0800 (China Standard Time)

Facing the exact same issue in my react-native project

Nathan Totten · Answer 4 · Wed Jan 29 2020 06:06:41 GMT+0800 (China Standard Time)

This is a duplicate of #950. The workaround is to install eslint-plugin-react-native as a top level module by running npm install eslint-plugin-react-native -D.

Dani Akash · Answer 5 · Wed Jan 29 2020 07:06:31 GMT+0800 (China Standard Time)

@ntotten the workaround didn't help, I'm still getting the same issue

["INFO" - 4:33:12 AM] Formatting /Users/apple/Documents/react-native/myProject/Navigators/UniversalStack.js
["INFO" - 4:33:12 AM] Using ignore file (if present) at /Users/apple/Documents/react-native/myProject/.prettierignore
["INFO" - 4:33:12 AM] Loaded module 'prettier@1.19.1' from '/Users/apple/Documents/react-native/myProject/node_modules/prettier/index.js'
["INFO" - 4:33:12 AM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:33:12 AM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 4:33:12 AM] Prettier Options:
{
  "filepath": "/Users/apple/Documents/react-native/myProject/Navigators/UniversalStack.js",
  "parser": "babel",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf"
}
["INFO" - 4:33:12 AM] Loaded module 'prettier-eslint@unknown' from '/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js'
["INFO" - 4:33:12 AM] Formatting using 'prettier-eslint'
["ERROR" - 4:33:14 AM] Error formatting document.
["ERROR" - 4:33:14 AM] Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'
Require stack:
- /__placeholder__.js
Error: Failed to load plugin 'react-native' declared in 'CLIOptions': Cannot find module 'eslint-plugin-react-native'
Require stack:
- /__placeholder__.js
	at Function.Module._resolveFilename (internal/modules/cjs/loader.js:627:15)
	at Function.resolve (internal/modules/cjs/helpers.js:21:19)
	at Object.resolve (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/shared/relative-module-resolver.js:44:50)
	at ConfigArrayFactory._loadPlugin (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:845:39)
	at /Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:734:33
	at Array.reduce (<anonymous>)
	at ConfigArrayFactory._loadPlugins (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:730:22)
	at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:554:32)
	at _normalizeObjectConfigDataBody.next (<anonymous>)
	at ConfigArrayFactory._normalizeObjectConfigData (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:491:20)
	at _normalizeObjectConfigData.next (<anonymous>)
	at createConfigArray (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:307:25)
	at ConfigArrayFactory.create (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/config-array-factory.js:362:16)
	at createCLIConfigArray (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:133:47)
	at new CascadingConfigArrayFactory (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:200:29)
	at new CLIEngine (/Users/apple/Documents/react-native/myProject/node_modules/eslint/lib/cli-engine/cli-engine.js:549:36)
	at getESLintCLIEngine (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/utils.js:401:12)
	at eslintFix (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js:151:53)
	at format (/Users/apple/Documents/react-native/myProject/node_modules/prettier-eslint/dist/index.js:119:10)
	at /Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:350580
	at t.default.safeExecution (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:351254)
	at t.default.<anonymous> (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:350554)
	at Generator.next (<anonymous>)
	at s (/Users/apple/.vscode/extensions/esbenp.prettier-vscode-3.20.0/dist/extension.js:1:345019)
["INFO" - 4:33:14 AM] Formatting completed in 205.873724ms.

Nathan Totten · Answer 6 · Wed Jan 29 2020 23:09:38 GMT+0800 (China Standard Time)

Could you provide a sample repo or full reproduction steps so I can recreate the issue?

no-response · Answer 7 · Sat Feb 01 2020 23:49:34 GMT+0800 (China Standard Time)

This issue has been automatically closed because there has been no response to our request for more information from the original author. Currently, there is not enough information provided for us to take action. Please reply and reopen this issue if you need additional assistance.

github-actions · Answer 8 · Sat May 02 2020 00:04:32 GMT+0800 (China Standard Time)

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.