8000 Relative imports are not working, but absolute imports function correctly after React Native upgrade 0.76.3. · Issue #1396 · facebook/metro · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
Relative imports are not working, but absolute imports function correctly after React Native upgrade 0.76.3. #1396
Open
@ciplnaveen

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0