Typescript can not resolve index.ts file when using path alias, unless it is included explicitly ($myPackage/index)

Question

Assume project structure below:

packages/
   utilities/
      index.ts
   app/
      app.ts
tsconfig.json

I created path aliases in order to access packages easier between each other, my tsconfig looks like this

{
  "compilerOptions": {
    "moduleResolution": "node",
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": false,
    "noImplicitAny": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "$app/*": ["packages/app/*"],
      "$utilities/*": ["packages/utilities/*"],
    }
  },
  "include": [
    "packages/*"
  ]
}

Finally my packages/utilities/index.ts file is sort of a mid point that imports and exports all utils I want to expose i.e.

export { isValidEmail } from '$utilities/validators';
//... etc

I initially thought that my app package would be able to do something like this

import { isValidEmail } from "$utilities";
// Errors Cannot find module '$utilities' or its corresponding type declarations.

But it errors with message above unless I use full path $utilities/index

the path specifies $utilities/* will be mapped to the corresponding directory, so just $utilities would have to be a separate entry if you want to import it that way. Someone might be able to give a cleaner solution but I think that's just the way it works. — Tadhg McDonald-Jensen
– Tadhg McDonald-Jensen, Commented Jul 17, 2020 at 15:06

Chanel · Accepted Answer · 2021-04-11 14:11:27Z

35

I did this trick and it solved my problem

"paths": {
    "@services": ["src/services"],
    "@services/*": ["src/services/*"],
    "@/*": ["src/*"]
},

Now I can access src/services/index by this line

import { useUtil } from '@services';

And it also works if I want to access child files/folders

I also noticed that path aliases on top are prioritized (in intellisense & auto imports) than ones that come after. So it's better to put longer aliases on top and shorter ones in the end.

edited Apr 11, 2021 at 14:11

answered Apr 8, 2021 at 20:30

Chanel

1,04913 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mustapha GHLISSI · Accepted Answer · 2024-11-24 14:52:37Z

1

This is easy to get fixed ! Your tsconfig.json file should look like one of the following cases:

If the folder only contains index.{js/ts} then your tsconfig.json should look like:

{
  ...,
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@folder": ["folder"]
    }
  }
}

If the folder contains subfolders only

{
  ...,
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@folder/*": ["folder/*"]
    }
  }
}

If the folder contains both index.{js/ts} and subfolders

{
  ...,
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@folder": ["folder"],
      "@folder/*": ["folder/*"]
    }
  }
}

That's all !

edited Nov 24, 2024 at 14:52

answered Nov 24, 2024 at 14:46

Mustapha GHLISSI

1,8161 gold badge20 silver badges21 bronze badges

Comments

Luca · Accepted Answer · 2020-07-17 15:00:49Z

0

Since isValidEmail is exported by index.ts, it is working as expected.

In the import statement you have to set the path to the file you want to reference, just like you did in the export statement.

In this case it will be:

import { isValidEmail } from '$utilities/index';

answered Jul 17, 2020 at 15:00

Luca

1191 silver badge6 bronze badges

Collectives™ on Stack Overflow

Typescript can not resolve index.ts file when using path alias, unless it is included explicitly ($myPackage/index)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related