eslint + jsconfig + nextjs module path aliases (absolue path import - @)

Question

I am trying to import the files using custom aliases following the nextjs documentation.

My current approach is

from

import Header from '../../../components/Header';

to

import Header from '@components/Header';

I am getting the expected result. But eslint throws the following error:

• unable to resolve path to module (eslint - import/no unresolved)

And I have tried adding the following line in my eslintrc file to resolve the error

    settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },

But still the eslint throws the same error.

What is the correct approach to resolve this one?

Thanks in advance...

Note: I don't want to remove eslint and I need @components import aliases

Afghan

Answer 1

Finally after digging into lots of GitHub answers and etc...

Inside your eslintrc file... add the following aliases

    settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@components', '../../../components/'],
          ['@images', '../../../assets/images/'],
        ],
        extensions: ['.js', '.jsx'],
      },
    },
  },

and also to fix flow error inside your flowconfig file add the name_mapper

module.name_mapper='^@components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^@images' ->'<PROJECT_ROOT>/../../../assets/images'

Afghan

Answer 2

You need to also install npm i -D eslint-import-resolver-typescript and then add below to eslint config file:

"settings": {
    "import/resolver": {
      "typescript": {} // this loads <rootdir>/tsconfig.json to eslint
    },
}

Reference: https://gourav.io/blog/nextjs-cheatsheet

Lutz

Answer 3

You can try adding your custom paths in tsconfig.json/jsconfig.json, like so:

• Add a baseUrl in your compilerOptions (in my case it's "baseUrl": ".")
• Add your paths in a paths object:

"paths": {
   "components": ["components/*"],
}

Aficionado

Hi thanks. Yes I am doing the same. But i am facing the eslint error. How to fix the lint error – Afghan

Answer 4

I was not able to solve the problem by the means described above.

However, we were able to solve the problem using the following library.

https://www.npmjs.com/package/eslint-import-resolver-alias

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

.eslintrc.json

{
...
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".ts", ".js", ".jsx", ".json"]
      }
    }
  }
}

import example

import Header from '../components/Header';

to

import Header from '@/components/Header';

Vector