How to use absolute imports in Gatsby with Eslint?

Question

Im using gatsby-plugin-root-import package in Gatbsy for using absolute imports. Absolute imports work but Eslint throws an error "import/no-unresolved". I tried to use this code:

module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    },
  },

But it doesn't work. Is there any solution for this problem?

gatsby-plugin-root-import config:

{
      resolve: "gatsby-plugin-root-import",
      options: {
        src: path.join(__dirname, "src"),
        pages: path.join(__dirname, "src/pages"),
        component: path.join(__dirname, "src/component"),
        images: path.join(__dirname, "src/assets/images"),
        fonts: path.join(__dirname, "src/assets/fonts"),
        styles: path.join(__dirname, "src/styles"),
      }
}

Answer 1

You can install the eslint-import-resolver-alias plugin as dev dependency like

npm install -D eslint-import-resolver-alias

and then edit your eslint config to specify the alias

module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
            ["src", "./src"],
            ["pages", "./src/pages"],
            ["component", "./src/component"],
            ["images", "./src/images"],
            ["fonts", "./src/fonts"],
            ["styles", "./src/styles"],
         ],
         "extensions": [".js", ".jsx"]
      }
    },
  },

Basically you need to provide all the alias as maps to eslint too