Description
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