Vite.js + Eslint unable to resolve path alias

[Delicious-Bacon]

I use Vue 3 on Vite.js with Eslint + Airbnb config. Airbnb config has a rule eslint(import/no-unresolved), which is good, but Eslint doesn't know how to resolve alias path.

I want to use aliases for paths — example:
import TableComponent from '@/components/table/TableComponent.vue'

I managed to set up my vite.config.js so that the app can resolve paths like this:

import path from 'path';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{
        find: "@", replacement: path.resolve(__dirname, 'src')
      },],
  },
});

Vue app works like that and resolves the import path correctly, but Eslint keeps reporting the error:
Unable to resolve path to module eslint(import/no-unresolved)

How and where can I tell Eslint how to resolve aliases?

I have tried: npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

// .eslintrc.js

extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'airbnb-base',
    'plugin:vue/vue3-strongly-recommended',
],

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', 'src'],
        ],
      },
    },
  },

But that doesn't work.

[aladdin-add]

this is related to the eslint-plugin-import, which is not maintained by the eslint team. you can file the issue in that repo.

maybe you can try this:

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
      },
    },
  },

[ianpaschal]

If I remove the plugin from the plugins array and use the settings section to add the alias (similar to what you did), ESLlint still complains about lines like:

import { App } from '~/App';

Although annoyingly the error is

Missing file extension for "~/App"eslintimport/extensions

and if I add .tsx, the error becomes

Unexpected use of file extension "tsx" for "~/App.tsx"eslintimport/extensions

I can silence these by turning off the import/extensions rule but I still want it to force the use of extensions for everything that isn't a TS module. I can also configure the rule to give that behavior but that feels like it shouldn't be necessary since that's the default behavior of import/extensions in the first place if aliases aren't used. Somehow the alias plugin and the import plugin are not playing nice together.

[Prakhargarg-2010196]

If I remove the plugin from the plugins array and use the settings section to add the alias (similar to what you did), ESLlint still complains about lines like:

import { App } from '~/App';

Although annoyingly the error is

Missing file extension for "~/App"eslintimport/extensions

and if I add .tsx, the error becomes

Unexpected use of file extension "tsx" for "~/App.tsx"eslintimport/extensions

I can silence these by turning off the import/extensions rule but I still want it to force the use of extensions for everything that isn't a TS module. I can also configure the rule to give that behavior but that feels like it shouldn't be necessary since that's the default behavior of import/extensions in the first place if aliases aren't used. Somehow the alias plugin and the import plugin are not playing nice together.

Thats what i said in the above reply to @Doug-Colin that the default functionality for this must be improved in some way. Btw try adding extensions to your paths ending like instead of ~/App do App.jsx although ik it feels weird. Also restart app and then tell what you are getting now

Moreover there was no need for me to define this plugin in the plugins as to the documentation suggests this.

Refer these:

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

[wmonecke]

@ianpaschal I am having the same issue with no avail.

[wmonecke]

@ianpaschal Nevermind let me save your day:

Try this:

// .eslintrc.json
       settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx'],
      },
      typescript: {
        project: './tsconfig.json',
      },
      alias: {
        map: [['~', path.resolve(__dirname, './src')]],
        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx'],
      },
    },
  },

[shennan]

Something I needed to do in VS Code after making changes was get the menu up (cmd + shift + p) and then ESLint: Restart ESLint Server.