0

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.json with this paths setup:

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"]
        }
      }
    }
    
  • I installed all required packages:

    npm install --save-dev eslint eslint-plugin-import eslint-import-resolver-typescript
    
    import 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/order rule doesn't recognize path groups correctly.

  • Aliases like @/components/Button sometimes trigger import/no-unresolved.

I expect

  • import/no-unresolved to correctly validate all imports including aliases.

  • import/order to 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?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.