Path alias with trailing slash not resolving

[zaqijr7]

Issue with Path Alias Resolution in TypeScript

I am encountering an issue when using path aliases in TypeScript.

When I import a module without explicitly including /index, such as:

import { Colors } from "@utils";

or

import { Colors } from "@utils/";

I receive the error:

Cannot find module '@utils' or its corresponding type declarations.

However, if I add /index explicitly, the import works fine:

import { Colors } from "@utils/index";

Strangely, when I don't want to add /index explicitly, I have to navigate into a folder and then back out with /.. for the index file to be detected, and everything works fine.

For example:

import { Colors } from "@utils/folder-example/..";

It seems like you have to at least navigate into one folder first, like adding @utils/folder-example/.. for the index to be detected. But when using just @utils or @utils/, the index file won't be detected.
This issue occurs with all the path aliases I have configured.

I have configured the path alias in my tsconfig.json as follows:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "CommonJS",
    "moduleDetection": "force",
    "moduleResolution": "node",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@utils/*": [
        "./src/utils/*"
      ]
    }
  }
}

Questions:

• Is this the expected behavior?
• How can I configure the path alias so that I don't need to add /index explicitly in the import?

I've tried various methods, but the results have been futile

🕗 Version & Regression Information

• This changed between versions ______ and _______
• This changed in commit or PR _______
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

No response

💻 Code

// Your code here

🙁 Actual behavior

Actual Behavior:

When I import a module using a path alias without explicitly adding /index, I encounter the error:

Cannot find module '@utils' or its corresponding type declarations.

However, if I explicitly add /index to the import, like this:

import { Colors } from "@utils/index";

The import works without any issues. Additionally, when I try to import without /index, I need to navigate into a folder and then back out using /.. for the index file to be detected and the import to work correctly.

For example:

import { Colors } from "@utils/folder-example/..";

This inconsistency in resolving path aliases is causing difficulties in the project.

🙂 Expected behavior

Expected Behavior:

The import should resolve the path alias correctly without requiring the explicit addition of /index. For example:

import { Colors } from "@utils";

This should work without any errors, just like importing with /index explicitly. The path alias should automatically resolve to the index.ts file in the specified directory, and no additional folder navigation should be necessary.

Additional information about the issue

No response

[KevinFalah]

I have the same issue, can anyone help with this?

[andrewbranch]

import { Colors } from "@utils";

It’s expected that this doesn’t work. The paths key you have written is @utils/*, which contains a slash. The module specifier in your code doesn’t match the key at all.

import { Colors } from "@utils/";

This appears to be a bug; this one should work.

[zaqijr7]

import { Colors } from "@utils";

It’s expected that this doesn’t work. The paths key you have written is @utils/*, which contains a slash. The module specifier in your code doesn’t match the key at all.

import { Colors } from "@utils/";

This appears to be a bug; this one should work.

Thank you for the response, I am very happy and looking forward to the fix