Xcode 14.3 - Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS
Problem
This issue is now fixed, for more details check out this comment. Description Since upgrading to Xcode 14.3 and working around the other new issues i.e. the codegen ios target version issue, there is still a further issue with metro. Getting a lot of these type of errors. It seems to be every time metro logs a log line from iOS (not Android), it then logs the below message as well (full paths redacted). This seems to cause a memory leak as well, with the metro node process eventually crashing when > 4GB RAM is used. The error message is interesting for many reasons. 1. Firstly it seems to be trying to resolve a flow type import. 2. Secondly the path does exist, but metro is not checking the platform-specific path i.e. `DatePickerIOS.ios.js`. 3. Thirdly we don't even use `DatePickerIOS` in the app. [code block] NOTE that this is not the codegen ios target version issue, I've already worked around that using the patch which has been released as 0.70.8 React Native Version 0.70.6 Output of `npx react-native info` [code block] Steps to reproduce Running a previously working app on Xcode 14.3 / iOS simulator with rosetta Snack, code example, screenshot, or link to a repository Can't provide one at this stage
Error Output
error message is interesting for many reasons.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Metro Bundler Module Resolution for DatePickerIOS in Xcode 14.3
The issue arises because Metro Bundler is not correctly resolving the platform-specific file for DatePickerIOS, leading to unnecessary errors and potential memory leaks. This happens when the bundler attempts to resolve a flow type import instead of checking for the correct platform-specific implementation, which in this case is 'DatePickerIOS.ios.js'.
Awaiting Verification
Be the first to verify this fix
- 1
Update Metro Configuration
Modify the Metro configuration to ensure that it correctly resolves platform-specific files. This can be done by adding a custom resolver in the 'metro.config.js' file.
javascriptmodule.exports = { resolver: { sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json', 'cjs', 'ios.js'], }, }; - 2
Clear Metro Cache
After updating the Metro configuration, clear the Metro cache to ensure that the changes take effect. This can help resolve any lingering issues from previous builds.
bashnpx react-native start --reset-cache - 3
Check for Unused Imports
Search your codebase for any imports of DatePickerIOS and remove them if they are not being used. This can help eliminate unnecessary references that may cause confusion in the bundler.
javascript// Example of removing unused import // import DatePickerIOS from 'react-native'; // Remove this line if not used - 4
Upgrade React Native Version
Consider upgrading to a newer version of React Native if available, as newer releases may contain fixes for issues related to module resolution and compatibility with Xcode.
bashnpm install --save react-native@latest - 5
Monitor Memory Usage
After applying the fixes, monitor the memory usage of the Metro process to ensure that it does not exceed 4GB and that the application runs smoothly without crashes.
bashtop -o MEM
Validation
Confirm that the application builds and runs without the 'Unable to resolve module' error. Additionally, monitor the Metro process to ensure that it does not crash due to high memory usage. If the application runs smoothly and the error is resolved, the fix is successful.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep