Recently, I completed a project using the expo typescript template that runs on both iOS and Android platforms, excluding web.
To enhance my development process, I established path aliases in the tsconfig.json file as shown below:
"paths": {
"@models/*": ["./src/models/*"],
"@navigation/*": ["./src/navigation/*"],
"@services/*": ["./src/services/*"],
"@components/*": ["./tsx/components/*"],
"@screens/*": ["./tsx/screens/*"],
"@assets/*": ["./assets/*"]
}
In line with this setup, I also adjusted the configuration in the babel.config.js file like so:
plugins: [
[
'module-resolver',
{
root: ['./'],
alias: {
'@models': path.resolve(path.dirname('.'), 'src/models'),
'@navigation': path.resolve(path.dirname('.'), 'src/navigation'),
'@services': path.resolve(path.dirname('.'), 'src/services'),
'@screens': path.resolve(path.dirname('.'), 'tsx/screens'),
'@components': path.resolve(path.dirname('.'), 'tsx/components'),
'@assets': path.resolve(path.dirname('.'), 'assets'),
}
}
]
]
This configuration has proven effective as the app bundles successfully and runs without issues. Nonetheless, some non-critical errors are being reported during the bundling phase, such as:
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/src/navigation/AppNavigator" in file /Users/jblues/LOSMobileApp/tsx/App.tsx.
transform[stderr]: Could not resolve "/Users/jblues/LOSMobileApp/tsx/components/BottomTabNavigator" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
transform[stderr]: Could not resolve "/Users/jblues/mobbiz/LOSMobileApp/tsx/screens/Login" in file /Users/jblues/LOSMobileApp/src/navigation/AppNavigator.ts.
. . and more. Is there any additional configuration I can include to address these errors in my setup?