Unable to resolve typescript alias path

[slim-hmidi]

I have this eslint config:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'airbnb',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    project: ['./tsconfig.json'],
    tsconfigRootDir: __dirname,
  },
  env: {
    node: true,
  },
  settings: {
    'import/resolver': {
      "eslint-import-resolver-custom-alias": {
        alias: {
            "@features": "./src/features",
        },
        "extensions": [".ts"],
    },
      node: {
        moduleDirectory: ['node_modules', 'src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
      },
    },
  },
  rules: {
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        'newlines-between': 'always',
      },
    ],
    'no-void': 0,
  },
};

whenever I use an alias path I get an error like Unable to resolve the path to module '@features/products/product.routes'. I added the paths to tsconfig.json and I installed eslint-import-resolver-custom-alias or eslint-import-resolver-typescript but it does not fix the issue.

eslint-plugin-import: v2.26.0.

[msalahz]

I tried eslint-import-resolver-custom-alias plugin and added the following to eslintrc and the error is gone

    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "@": "./src"
        },
        "extensions": [".ts", ".tsx"],
      }
    }

[threaddot]

eslint-import-resolver-custom-alias

Unfortunately, this plugin does not fix the issue with my monorepo setup.

[sanding0]

same issue and the plugin does not fix mine too

[JounQin]

You'd better provide a runnable reproduction.

[ottodevs]

I don't know if this is the same issue, but eslint-plugin-import was complaining on my next.js project when I tried to import modules with the alias:

This is a monorepo with pnpm, but I guess it should be the same with any other tool, I have a package with the next app

So I added this setting to my eslintrc.js:

And that fixes the issue, since it is now correctly parsing my tsconfig.json for that monorepo package and it seems smart enough to recognise my defined path there:

Update: For this to work fine in a new project, I also needed to install: eslint-import-resolver-typescript to properly use the config above

Hope it works for you 👍

[YOS0602]

@ottodevs I've been struggling with the same issue for over an hour with my Remix v2 app... Your solution worked for me! Thank you! 🙏

For those who are in the same situation, I'm sharing my settings:

My dependencies version:

  "dependencies": {
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@remix-run/server-runtime": "^2.9.2",
    "@vercel/remix": "2.9.2-patch.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "@remix-run/eslint-config": "^2.9.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.57.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "typescript": "5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },

.eslintrc.cjs

  settings: {
    "import/resolver": {
      typescript: {
        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
        project: __dirname,
      },
      node: true,
    },
  },

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"],
      "@routes/*": ["./app/routes/*"]
    },

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import { vercelPreset } from "@vercel/remix/vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  plugins: [remix({ presets: [vercelPreset()] }), tsconfigPaths()],
});