Next.js app with absolute path - getting eslint "Unable to resolve path to module" error

Hello, I’m wondering what I’ve done wrong because in a really simple use case i’m still getting the “Unable to resolve path to module” error. Here is my configuration: "eslint-plugin-import": "^2.23.3", "eslint-import-resolver-alias": "^1.1.2",

My folders: project/src/components project/src/styles project/src/utils

project/jsconfig.json

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

project/.eslintrc.js

settings: {
  'import/resolver': {
    alias: [
      ['@components', './src/components'],
      ['@styles', './src/styles'],
      ['@utils', './src/utils'],
    ],
  },
},

I’m using the import like this import Layout from '@components/Layout'; The Next.js compilation is working great but eslint doesn’t seems to use import/resolver settings. Any ideas? Thanks.

[ravenbasix]

I tried creating a repo which replicates the issue and found why it wasn’t working. If you are extending eslint configuration with the extends option, you need to add plugin:import/resolver in the list.

.eslintrc.js

module.exports = {
  extends: [
    ...
    'plugin:import/resolver',
  ],
};

Thank you for your help @PsyGik.

[mildrenben]

Thanks @ravenbasix This should be added to the wiki!