react-native: ESLint does not find React Native components

{ “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$"
	]
  }
}

As a temporary workaround until this gets resolved:

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

still an issue on rn 0.63.4 from 0.61.5

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

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

Any update?

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

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.

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

is this still being worked on?

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