It's not working

[joaolavoier-luizalabs]

As I've saw in the documentation.

// .eslintrc.json
"settings": {
  "import/resolver": {
    "babel-module": {}
  }
}

But it isn't working. It's my eslint config.

"settings" : {
    "import/resolver": {
        "babel-module": {
            "root": ["./src"],
            "extensions": [".ios.js", ".android.js", ".js"]
        }
    }
}

The ESlint still showing the import/no-unresolved error, though my babel-plugin-module-resolver is working perfectly. My app is running with import absolut.

This problem is just in the ESlint that can't resolve anything with my configuration.

Packages

    "babel-plugin-module-resolver": "^3.1.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.0",
    "eslint-plugin-react": "^7.10.0",
    "eslint-watch": "^4.0.0",

[mauriciord]

Hey @joaolavoier-luizalabs ,

We use this config at iClinic:

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [
      2,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "no-console": "off",
    "no-return-assign": "off",
    "no-nested-ternary": "off",
    "react/no-array-index-key": "off",
    "react/prefer-stateless-function": "off",
    "import/prefer-default-export": "off",
    "react/forbid-prop-types": [0],
    "react/require-default-props": [0],
    "global-require": [0],
    "react/jsx-indent": [1, 2]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src", "assets"]
      }
    }
  }
}

And .babelrc:

{
...
"plugins": [
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "components": "./src/components",
          "constants": "./src/constants",
          "features": "./src/features",
          "navigation": "./src/navigation",
          "screens": "./src/screens",
          "services": "./src/services",
          "shared": "./src/shared",
          "state": "./src/state",
          "utils": "./src/utils",
          "assets": "./assets"
        }
      }
    ]
  ]
...
}

[joaolavoier-luizalabs]

It hasn't worked here. The lint still complaining about the import/no-unresolved.

Unable to resolve path to module 'components'              import/no-unresolved

What are the dependencies that you're using to figure it out?

[mauriciord]

Probably it's eslint-import-resolver-node

"devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-config-standard-react": "^6.0.0",
    "eslint-config-standard-react-native": "^1.0.0",
    "eslint-import-resolver-node": "^0.3.2",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "eslint-plugin-standard": "^3.0.1",
    "flow-bin": "^0.69.0",
    "jest-expo": "^27.0.0",
    "react-devtools": "^3.2.3",
    "remote-redux-devtools": "^0.5.12"
  }

[joaolavoier-luizalabs]

Thank you man! One of my mistakes was a bullshit that I did.

I've inserted the "settings" within the "rules" of the .eslintrc.json.

Now my eslint config is:

// .eslintrc.json
{
  "env": {
    "node": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "linebreak-style": ["off"],
    "no-undef": ["error"],
    "react/sort-comp": ["off"],
    "react/prefer-stateless-function": ["off"],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2,
    "import/no-extraneous-dependencies": [
      "error",
      { "devDependencies": ["**/*.test.js"] }
    ],
    "import/no-absolute-path": [2, { "esmodule": false, "commonjs": false, "amd": false }]
  },
  "settings" : {
    "import/resolver": {
      "node": {
        "paths": ["./src"]
      }
    }
  },
  "globals": {
    "it": 0,
    "expect": 0,
    "describe": 0,
    "navigator": 0
  }
}

And babelrc

// .babelrc

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

That's working perfectly. 😄