2

I'm using babel-plugin-root-import to resolve the relatives path and it works fine, also i'm following the airbnb standards and using eslint-plugin-import to check the imports but i'm still triying to remove the import rules. I'm already try to configure the resolver but it keeps thrown the errors.

.babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    plugins: [
      [
        'babel-plugin-root-import',
        {
          "paths": [
            {
              "rootPathSuffix": "./",
              "rootPathPrefix": "@root/"
            },
            {
              "rootPathSuffix": "./assets",
              "rootPathPrefix": "@asset/"
            },
            {
              "rootPathSuffix": "./src/helpers",
              "rootPathPrefix": "@help/"
            },
            {
              "rootPathSuffix": "./src/components",
              "rootPathPrefix": "@comp/"
            },
            {
              "rootPathSuffix": "./src/styles",
              "rootPathPrefix": "@styles/"
            }
          ]
        }
      ]
    ],
    presets: ['babel-preset-expo'],
  };
};

package.json


{
  "main": "./src/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint:check": "./node_modules/.bin/eslint -c .eslintrc --ext .js src",
    "lint:fix": "./node_modules/.bin/eslint -c .eslintrc --ext .js src --fix"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "expo-cli": "^3.11.2",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-splash-screen": "^3.2.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-plugin-root-import": "^6.4.1",
    "babel-preset-expo": "~8.0.0",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0"
  },
  "private": true
}

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
  },
  "settings": {
    "import/resolver": "babel-plugin-root-import"
  }
}
Martín San Juan
  • 21
  • 1
  • 4
  • It may not be the cause of your errors but according to [here](https://www.npmjs.com/package/babel-plugin-root-import) using `@` symbol is not recommended as it can conflict with npm package names. – Max Collier Feb 28 '20 at 01:25

1 Answers1

0

To run eslint with this babel plugin I had to do some extra installations:

yarn add eslint-import-resolver-babel-plugin-root-import -D

and modified my .eslint.js file:

and added:

settings: {
     'import / resolver': {
       'babel-plugin-root-import': {
         rootPathSuffix: 'src',
       },
     },
   },

in my case I was using the eslint ~/ pattern to reference the "src" folder.

I hope my tips have helped

Ednilson123
  • 1
  • 1