Relative imports are not working, but absolute imports function correctly after React Native upgrade 0.76.3.

[ciplnaveen]

Description

After upgrading my React Native project, I've encountered an issue where relative imports no longer work, while absolute imports function as expected. This problem affects various modules, including components and utilities within the src directory.

Steps to reproduce

This is my structure for dialog

src/components/dialogs/index.ts
index.ts imports all the different dialogs and export them, so that other components can use them.

**index.ts**
import MyDialog from 'src/components/dialogs/myDialog/MyDialog';
export {
    MyDialog
}

src/components/index.ts
index.ts imports all the dialogs, inputs, buttons and etc then exports them

**index.ts**
import MyDialog from './dialogs';
export { 
    MyDialog, ---> This doesn't work if I import like this
    OtherDialogs...
}

import MyDialog from 'src/components/dialogs/myDialog/MyDialog'; ---> This works

I have no clue why it started braking after the upgrade.

This is babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          src: './src',
        },
      },
    ],
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

This is tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
    "paths": {
      "src/*": ["src/*"]
    },
    "types": ["@types/styled-components-react-native"]
  }
}

React Native Version

0.76.3

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 15.1.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 721.78 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.1
    path: ~/.nvm/versions/node/v20.18.1/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.18.1/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.1/bin/npm
  Watchman:
    version: 2024.11.18.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Warning: TypeError: Cannot read property 'MyDialog' of undefined

Reproducer

I couldn't push on the repo https://github.com/ciplnaveen/react-native-import

Screenshots and Videos

No response

[Suliman-A]

Same issue here

[cortinico]

Passing over to Metro.

Also @ciplnaveen your reproducer is empty

[gustavo-buoro]

In my case, the file being imported has an folder with the same name in the same level of file hierarchy, and this is causing the problem after RN update (I don't know the exact agent causing this).

-- hooks
--useFoo.tsx
--useBar.ts
-- hooks.ts

Just renamed the hook.ts

[robhogan]

babel-plugin-module-resolver has a bug with files and directories sharing the same name - see #1345 for more details.

If that's not the problem in your case, please put up a github repo that reproduces the problem.