Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Path Alias Not Resolving Correctly Without Explicit /index in TypeScript #61230

Open
zaqijr7 opened this issue Feb 20, 2025 · 1 comment
Open

Comments

@zaqijr7
Copy link

zaqijr7 commented Feb 20, 2025

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants