React Native新手导入react-native-calendar-picker后遇Metro模块解析错误求助

Hey there, I’ve run into similar Metro resolution headaches before, so let’s work through this fix step by step!

What’s causing this error? #

The root issue here is that the react-native-calendar-picker package’s package.json has an incorrect main field. It tells Metro to look for a file at ./CalendarPicker, but that file (or its expected variants like CalendarPicker.js or an index.js inside a CalendarPicker folder) doesn’t exist in the installed package.

Step-by-step solutions #

• First, reset your Metro cache (quick sanity check)
  Cached module paths often cause weird, unexplained issues. Stop your Metro server and run:

  npx react-native start --reset-cache
  

  Reload your app after this. If the error goes away, you’re done! If not, move to the next steps.

• Fix the package’s main field manually

  1. Navigate to C:\Users\Name\Project\app\node_modules\react-native-calendar-picker
  2. Open the package.json file
  3. Look for the main key — it’s probably set to "CalendarPicker" right now
  4. Update it to match the actual entry file path of the package. Common correct values are:
     • "./index.js" (if there’s an index.js in the package root)
     • "./src/CalendarPicker.js" (if the core component lives in the src folder)
  5. Save the file, restart Metro with the cache reset command above, and test again.

• Reinstall the package
  Sometimes the package gets corrupted during installation. Uninstall and reinstall it to fix this:

  # Using npm
  npm uninstall react-native-calendar-picker
  npm install react-native-calendar-picker
  
  # Or using yarn
  yarn remove react-native-calendar-picker
  yarn add react-native-calendar-picker
  

  Don’t forget to reset the Metro cache after reinstalling.

• Try a specific stable version
  If the latest version has this bug, try an older, well-reviewed release. For example, if version 7.1.0 is known to work:

  npm install react-native-calendar-picker@7.1.0
  

  (You can check the package’s npm page for version history and user feedback on stable builds.)

• Double-check your import statement
  Make sure you’re importing the component correctly. It should be:

  import CalendarPicker from 'react-native-calendar-picker';
  

  Avoid adding extra paths to the import (like react-native-calendar-picker/CalendarPicker) unless you’ve confirmed that’s the correct file structure.

内容的提问来源于stack exchange，提问作者Manish kumar