CODEWITHSUNDEEP
reactjstypescriptvite
bildungsroman
bildungsroman

Reputation: 473

TS Config nested alias for absolute path not working

I'm trying to set up path aliases in my tsconfig.json for a React app bundled with Vite. Here is the relevant part of my tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["src/*", "node_modules/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "pages/*": ["src/constants/*"],
      "store/*": ["src/store/*"],
      "types/*": ["src/types/*"],
      "NestedFolder/*": [
        "src/components/NestedFolder/*"
      ],
    }
  },
  "include": ["src/**/*", "*"]
}

The only issue is with the NestedFolder. When I import this way, everything works:

import { ComponentName } from "components/NestedFolder/types";

However, the nested alias fails:

import { ComponentName } from "NestedFolder/types";

// error 
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"

// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved

I would like to do nested components because I have several folders that are nested 3-4 levels and it would be nice to have a cleaner view of my imports. Is there a way to do this?

Upvotes: 5

Views: 5630

Answers (4)

KUMAR HARSH
KUMAR HARSH

Reputation: 1

I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287

Upvotes: 0

Mohamed Allal
Mohamed Allal

Reputation: 20870

if vite-tsconfig-paths is not working for you. Make sure you didn't install v4.0.0. That version has a bug.

v4.0.1 fix it.

Install with the following:

npm install vite-tsconfig-paths@latest

Should install v4.0.1 at least.

Upvotes: 1

Harley Lang
Harley Lang

Reputation: 2333

The accepted answer did not work for me. I found that I had to install the following packages:

npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript

And then add the following configurations, with the important ingredient being strongly-defined alias paths:

const path = require('path');

module.exports = {
  root: true, // important to ensure nested eslint scoping in monorepos
  plugins: ['@typescript-eslint', 'import'],
  extends: [
    'airbnb-typescript-prettier',
    'plugin:import/typescript'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, './tsconfig.json'),
    tsconfigRootDir: './src',
  },
  settings: {
    "import/parsers": { // add this definition
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    'import/resolver': {
      alias: {
        map: [
          // define each alias here
          ['components', path.join(__dirname, './src/components')],
        ],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
      },
      typescript: {
        project: path.join(__dirname, './tsconfig.json'),
      },
    },
  },
}

I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287

Upvotes: 2

DCVDiego
DCVDiego

Reputation: 306

You need to install the vite-tsconfig-paths plugin to set up path aliases using TypeScript and Vite. If nothing changes and you are using VSCode make sure to restart the TypeScript server by pressing Ctrl+Shift+P or Cmd+Shift+P, typing restart, and then selecting the command: TypeScript: Restart TS server

Upvotes: 3

Related Questions