React-native: ESLint does not find React Native components

[tapz]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

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 {
  Text,
  View,
  ScrollView,
  StyleSheet 
} from 'react-native';

"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)

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Memory: 1.27 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 21.1.1, 21.1.2, 22.0.0, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.2
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.62.1 => 0.62.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. eslint

Expected Results

Describe what you expected to happen.

No errors.

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

https://stackoverflow.com/questions/60973737/eslint-does-not-find-react-native-components

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[safaiyeh]

Hi @tapz, many factors can be the the root cause of this. eslint version, VS Code plugins, etc.. could you provide a very simple reproducible repo that we can check out? My hunch is that it is an environment issue rather than an issue with React Native.

[tapz]

@safaiyeh It cannot be VS code plugin as I run eslint from the command line. Eslint version you can find from the package.json above.

[tapz]

My .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
  }
}

[rush86999]

same problem here:

here's my eslintrc.js

module.exports = {
  root: true,
  extends: [
    '@react-native-community',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings'
  ],
  plugins: ['import'],
  rules: {
    'import/no-unresolved': [2, {commonjs: true, amd: true}],
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
  }
};

[jchook]

As a temporary workaround until this gets resolved:

module.exports = {
  settings: {
    'import/ignore': ['react-native'],
  }
}

[tapz]

Thanks @jchook, this really helped!

[andrewzey]

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.

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"]
  }
}

via: https://stackoverflow.com/a/61734408

[tapz]

Any reason why the import/export is done this way?

[benadamstyles]

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

Note: this actually ignores any packages with react-native in their name, e.g. react-native-svg, as it is parsed as a regex. Much safer to do:

{
  "settings": {
    "import/ignore": [
        "node_modules/react-native/index\\.js$"
    ]
  }
}

[niklas-r]

We experienced this when upgrading from v0.61.x to v0.63.0.

We don't have Flow enabled in our project. So in our case, I believe the error is caused by the addition of Flow typings in the updated entry point file. In v0.61.x, the entry point file didn't contain any Flow typings so the Babel parser could handle it.

We're using the workaround posted by @benadamstyles to get around this issue.

[jess-dovetail]

Also in the middle of upgrading from RN 0.61.5 to RN 0.63.1 and Flow 0.122.0 and have encountered this issue.

[aprilmintacpineda]

I have a newly initialized app, still a problem as of the moment. It says:

error Text not found in 'react-native'  import/named