react native - Path Alias Not Resolving Correctly Without Explicit index in TypeScript - Stack Overflow

admin管理员组

文章数量:1289543

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

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.

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

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.

• typescript
• react-native
• expo

Share Improve this question Follow edited Feb 20 at 8:12 zaqijr7 asked Feb 20 at 4:53 zaqijr7zaqijr7 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I've been facing the same issue since version 0.76 (I believe?)

My workaround is just to add another entry for each of them within tsconfig.json :

{
  "compilerOptions": {
    "paths": {
      "@utils": [
        "./src/utils/index"
      ]
      "@utils/*": [
        "./src/utils/*"
      ]
    }
  }
}

本文标签： react nativePath Alias Not Resolving Correctly Without Explicit index in TypeScriptStack Overflow