React-native-screens: Unable to resolve path to module 'react-native-screens' (ESLint)

Created on 25 Jan 2019  路  9Comments  路  Source: software-mansion/react-native-screens

Got this lint error in my VS Code:

Unable to resolve path to module 'react-native-screens'.eslint(import/no-unresolved)
module "react-native-screens"

Most helpful comment

I fixed this issue by adding the extension .native.js to the eslint-import-resolver-node config in my .eslintrc file:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".json", ".native.js"]
      }
    }
  }
}

Explanation: The idea comes from benmosher's comment at eslint-plugin-import. In my case, [".js", ".jsx", ".json"] is the default configuration for the node resolver extensions; this can be found out e.g. by running eslint --print-config index.js. (The eslint-import-resolver-node extensions for the default airbnb config are defined in eslint-config-airbnb/rules/react.js as ['.js', '.jsx', '.json']; eslint-config-airbnb adds rules for React by default: eslint-config-airbnb/index.js.) react-native-screens sets src/screens as main entry point in the package.json file. In the src-folder screens.native.js is the correct entry point for react-native, so adding .native.js to the list of resolver extensions fixes the problem.

All 9 comments

I get this error as well, looking in the react-native-screens folder in my node_modules, if I add an node_modules/react-native-screens/index.js file with the following, the ESLint error goes away:

import screens from './src/screens';

export default screens;

happen to me as well, for now I disabled that error by using // eslint-disable-next-line import/no-unresolved

Same problem for me :(
Annoying !

I fixed this issue by adding the extension .native.js to the eslint-import-resolver-node config in my .eslintrc file:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".json", ".native.js"]
      }
    }
  }
}

Explanation: The idea comes from benmosher's comment at eslint-plugin-import. In my case, [".js", ".jsx", ".json"] is the default configuration for the node resolver extensions; this can be found out e.g. by running eslint --print-config index.js. (The eslint-import-resolver-node extensions for the default airbnb config are defined in eslint-config-airbnb/rules/react.js as ['.js', '.jsx', '.json']; eslint-config-airbnb adds rules for React by default: eslint-config-airbnb/index.js.) react-native-screens sets src/screens as main entry point in the package.json file. In the src-folder screens.native.js is the correct entry point for react-native, so adding .native.js to the list of resolver extensions fixes the problem.

Thanks @skleeschulte!
Can confirm that this works for us as well.

I resolve that error by simply
npm install react-native-screens

After adding the settings to .eslintrc the error changed to this:

enableScreens not found in 'react-native-screens' eslint(import/named)

also resolve with
yarn add react-native-screens

I tried all of the options outlined here (and elsewhere) and had no luck. What has seemed to resolve the issue was to add the following to the .flowconfig file

module.file_ext=.native.js
Was this page helpful?
0 / 5 - 0 ratings