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

[raphael-belin]

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.

[PsyGik]

Maybe try this: (Note the trailing / after the folder name)

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

[raphael-belin]

Maybe try this: (Note the trailing / after the folder name)

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

Unfortunately, it hasn't changed anything. According to the README, ['helper', './utils/helper'] means that the modules which match helper or helper/* so I don't think the trailing / can fix this.

[RiceWorld]

same here!! I'm also using next.js. It's work perfectly. the error only occurs in eslint. (IDE is using Visual Studio Code)

[PsyGik]

Unfortunately, it hasn't changed anything. According to the README, ['helper', './utils/helper'] means that the modules which match helper or helper/* so I don't think the trailing / can fix this.

Hmm, that's weird. So in my project, this is the setup:

"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.23.4",

settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      alias: {
        map: [
          ['@/services', './src/services/'],
          ['@/context', './src/context/'],
          ['@/utils', './src/utils/'],
        ],
        extensions: ['.js', '.jsx'],
      },
    },
  },

and the jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/services/*": [
        "./services/*"
      ],
      "@/context/*": [
        "./context/*"
      ],
      "@/utils/*": [
        "./utils/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ],
}

And the eslint works as expected. My guess is the map key is missing in your config, maybe try that?

[raphael-belin]

I tried with and without the map key. None of these works. Furthermore, according to the documentation the map key is mandatory only if you want to specify extensions.

[PsyGik]

Would it be possible to create a repo which replicates the issue?

[raphael-belin]

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!