CODEWITHSUNDEEP
javascriptreact-nativeeslint
Tapani
Tapani

Reputation: 3231

ESLint does not find React Native components

I'm getting these ESLint errors in all of my js files, which import React Native components. Imports from all other libraries work just fine and the app also compiles and runs without problems. Any idea what could be the reason?

  3:3  error  Text not found in 'react-native'        import/named
  4:3  error  View not found in 'react-native'        import/named
  5:3  error  ScrollView not found in 'react-native'  import/named
  6:3  error  StyleSheet not found in 'react-native'  import/named

Import:

import {
  Text,
  View,
  ScrollView,
  StyleSheet 
} from 'react-native';

package.json

"react-native": "0.62.0",
"eslint": "6.8.0",
"eslint-plugin-react-native": "3.8.1",
"@react-native-community/eslint-config": "1.0.0",
"flow-bin": "0.121.0" (not using in my code)

.eslintrc:

{
  "env": {
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "react-native",
    "import"
  ],
  "parser": "babel-eslint",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".json", ".native.js"]
      }
    }
  },
  "rules": {
    "keyword-spacing": [1, { "before": true }],
    "key-spacing": [1, { "afterColon": true }],
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react-native/no-unused-styles": 1,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 0,
    "react-native/no-color-literals": 0,
    "consistent-return": 1,
    "no-unexpected-multiline": 1,
    "no-extra-boolean-cast": 1,
    "no-console": 0,
    "semi": [
      1,
      "always"
    ],
    "no-undef-init": 2,
    "no-undef": 2,
    "no-unused-vars": [1, {
      "vars": "all",
      "args": "after-used",
      "varsIgnorePattern": "hJSX",
      "argsIgnorePattern": "^_"
    }],
    "no-var": 1,
    "eqeqeq": 1,
    "dot-notation": 1,
    "no-caller": 2,
    "no-eval": 2,
    "no-extend-native": 1,
    "no-implied-eval": 2,
    "no-shadow": [
      2,
      {
        "allow": [
          "err"
        ]
      }
    ],
    "quotes": [1, "single"],
    "no-multi-spaces": 1,
    "prefer-arrow-callback": 1,
    "import/default": 0,
    "no-multiple-empty-lines": 1,
    "require-atomic-updates": 0,
    "space-infix-ops": 1,
    "space-unary-ops": 1,
    "comma-spacing": 1,
    "no-mixed-spaces-and-tabs": 1,
    "curly": 1
  },
  "globals": {
    "after": true,
    "afterEach": true,
    "before": true,
    "beforeEach": true,
    "describe": true,
    "xdescribe": true,
    "it": true,
    "xit": true,

    "fetch": true,
    "__DEV__": true
  }
}

Upvotes: 11

Views: 3825

Answers (1)

jchook
jchook

Reputation: 7220

It's a known issue

Short explanation

Looking at node_modules/react-native/index.js, you can see that it uses getters to define all the exports.

module.exports = {
  // Components
  get AccessibilityInfo(): AccessibilityInfo {
    return require('./Libraries/Components/AccessibilityInfo/AccessibilityInfo');
  },
  get ActivityIndicator(): ActivityIndicator {
    return require('./Libraries/Components/ActivityIndicator/ActivityIndicator');
  },
  get Button(): Button {
    return require('./Libraries/Components/Button');
  },

This interferes with the linter's ability to statically resolve imports.

Workaround

You can work around this issue by ignoring the entire react-native dependency in the eslint-plugin-import import/ignore setting:

{
  "settings": {
    "import/ignore": ["react-native"]
  }
}

Upvotes: 12

Related Questions