ESLint configuration with Babel, Flow, React and React Native

Question

I'm developing a mobile application in React Native and I've been trying to configure ESLint properly for a while (including Babel, Flow and Prettier).

I get the following error in VSCode : 'module' should be listed in the project's dependencies. eslint(import/no-extraneous-dependencies). This goes for all my modules and plugins such as react, react-native and others. I installed every package and the VSCode ESLint extension but ESLint still raises this error. Maybe I've duplicated some functionalities in the extends section too, I'm wondering if my configuration is good and if I can get rid of this error (everything else looks to work as expected).

.eslintrc.json

{
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:flowtype/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/babel",
    "prettier/react",
    "prettier/flowtype",
    "prettier/standard"
  ],
  "plugins": [
    "react",
    "react-native",
    "flowtype",
    "standard",
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "jest": true
  },
  "rules": {
    "import/no-unresolved": "off",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100
      }
    ]
  }
}

package.json

{
  "name": "PICSTART",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "ios": "react-native run-ios --simulator=\"iPhone XR\"",
    "android": "react-native run-android",
    "debugjs": "react-devtools",
    "test": "jest",
    "flow": "node_modules/flow-bin/vendor/flow"
  },
  "dependencies": {
    "@okgrow/react-native-copilot": "^2.4.1",
    "moment": "^2.24.0",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-camera": "^1.3.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-fs": "^2.13.3",
    "react-native-image-picker": "^0.28.0",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-modal": "^9.0.0",
    "react-native-svg": "^9.3.3",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^2.0.4",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-mock-store": "^1.5.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/runtime": "^7.1.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "23.6.0",
    "eslint": "^5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-flowtype": "^3.4.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "eslint-plugin-standard": "^4.0.0",
    "flow-bin": "^0.78.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.0",
    "prettier": "^1.16.4",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native",
    "testRegex": "./__tests__/[^setup].*.js$",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"
    ],
    "setupFiles": [
      "./__tests__/setup.js"
    ]
  }
}

Vencovsky Vencovsky · Accepted Answer · 2019-03-20T11:16:09

This error eslint(import/no-extraneous-dependencies) happens because you are importing a module that isn't in your package.json.

If everything is Ok, no errors while compiling, you could look at the docs here and they explain how to disable this rule.

If .eslintrc.json and package.json aren't in the same folder, this may cause the error because eslint looks for package.json file but it can find it because it's in another folder.

Edit: Maybe you ar missing "es6": true in "env"

Try

"env": {
    "es6": true,
    "browser": true,
    "jest": true
},

ESLint configuration with Babel, Flow, React and React Native

1 Answers