Using Custom Path Aliases Are Not Working

[814704261]

Description

The custom path alias I set according to the official website does not work.

Below is my configuration file.

tsconfig.json

{
"extends": "@react-native/typescript-config/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"": ["src/"],
"@/": ["src/"],
"@views/": ["src/views/"],
"@components/": ["src/components/"],
"@assets/": ["src/assets/"],
"@screen/": ["src/screen/"]
}
}
}

babel.config.js

module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: ['.ios.js', '.android.js', 'js', 'jsx', 'ts', 'tsx'],
alias: {
'@/': './src/',
'@components': './src/components/',
'@views': './src/views/',
'@assets': './src/assets/',
'@screen': './src/screens/',
},
},
],
],
}

Steps to reproduce

npm run ios
or
npm run android

React Native Version

0.74.0

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 156.17 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.16.0
    path: ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v18.16.0/bin/yarn
  npm:
    version: 9.5.1
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "29"
      - "31"
      - "32"
      - "33"
      - "33"
      - "34"
    Build Tools:
      - 29.0.0
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 34.0.0
    System Images:
      - android-28 | Google Play Intel x86 Atom
      - android-29 | ARM 64 v8a
      - android-29 | Google Play Intel x86 Atom
      - android-31 | Intel x86_64 Atom
      - android-31 | Google Play Intel x86_64 Atom
      - android-31 | Google APIs ATD Intel x86_64 Atom
      - android-32 | Intel x86_64 Atom
      - android-32 | Google APIs ATD Intel x86_64 Atom
      - android-33-ext4 | Google Play ARM 64 v8a
      - android-33-ext4 | Google Play Intel x86_64 Atom
      - android-33 | Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-33 | Google APIs ATD Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-34 | Google APIs ATD Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.2
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

error: Error: Unable to resolve module @/screen/Application from /Users/zhoujun/Documents/ReactNativeProject/BiliBili/App.tsx: @/screen/Application could not be found within the project or in these directories:
  node_modules
   8 | import React from 'react'
   9 | import { NavigationContainer } from '@react-navigation/native'
> 10 | import Application from '@/screen/Application'
     |                          ^
  11 |
  12 | function App(): React.JSX.Element {
  13 |   return (
    at ModuleResolver.resolveDependency (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 2)
    at async visit (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 0)
    at async buildSubgraph (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
    at async Graph._buildDelta (/Users/zhoujun/Documents/ReactNativeProject/BiliBili/node_modules/metro/src/DeltaBundler/Graph.js:157:22)

Reproducer

none

Screenshots and Videos

No response

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[JsonLee12138]

I am using the latest version 0.74.2, but the same problem occurs, and I used two methods to solve this problem, one was the metro.js configuration and the other was the babel configuration, but neither worked.

[netmaxt3r]

can you modify babel.config.js without trailiing /. below config works for me on rn 0.74.3 and metro 0.80.9

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      "module-resolver",
      {
        alias: {
          "@": "./src"
        },
      },
    ],
  ],
};

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

App.tsx

import { foo } from '@/foo'

[814704261]

can you modify babel.config.js without trailiing /. below config works for me on rn 0.74.3 and metro 0.80.9

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      "module-resolver",
      {
        alias: {
          "@": "./src"
        },
      },
    ],
  ],
};

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

App.tsx

import { foo } from '@/foo'

Thank you for solving my problem