I'm working with a Next.js 15 project using TypeScript, and I'm trying to properly configure eslint-plugin-import to work with path aliases (like @/), as well as import sorting and unresolved path detection.
I’ve already done the following:
I created a
tsconfig.jsonwith this paths setup:{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }I installed all required packages:
npm install --save-dev eslint eslint-plugin-import eslint-import-resolver-typescriptimport importPlugin from 'eslint-plugin-import'; export default [ { files: ['**/*.{js,ts,jsx,tsx}'], plugins: { import: importPlugin, }, settings: { 'import/resolver': { typescript: { project: './tsconfig.json', }, node: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, }, }, rules: { 'import/no-unresolved': 'error', 'import/order': [ 'error', { groups: ['builtin', 'external', 'internal'], pathGroups: [ { pattern: '@/**', group: 'internal', position: 'after', }, ], 'newlines-between': 'always', alphabetize: { order: 'asc', caseInsensitive: true }, }, ], }, }, ];
Even after all of this:
ESLint does not report unresolved imports when I write something like
import x from '@/not-existing-file'.The
import/orderrule doesn't recognize path groups correctly.Aliases like
@/components/Buttonsometimes triggerimport/no-unresolved.
I expect
import/no-unresolvedto correctly validate all imports including aliases.import/orderto correctly group and sort imports (especially@/**under "internal").
What are the correct steps to fully configure eslint-plugin-import in a Next.js 15 project using flat config, TypeScript, and path aliases?