如何解决无法解析模块@react-navigation/native-stack的问题？

问题描述 #

出现无法解析模块@react-navigation/native-stack的错误，已尝试以下缓存重置命令但未解决：

• npx react-native start --reset-cache
• rm -rf $TMPDIR/metro-bundler-cache-*

可行解决方案 #

• 确认依赖已正确安装
  先检查项目根目录的package.json中是否存在@react-navigation/native-stack依赖项。如果没有，执行对应的安装命令：

  # npm
  npm install @react-navigation/native-stack
  # yarn
  yarn add @react-navigation/native-stack
  

  注意：@react-navigation/native-stack依赖@react-navigation/native，确保这个核心包也已安装。

• 检查版本兼容性
  确保@react-navigation/native和@react-navigation/native-stack的版本匹配（比如均为6.x系列），版本不兼容也会导致模块解析失败。可以在package.json中查看版本号，若不匹配，重新安装对应版本：

  # 安装指定6.x版本示例
  npm install @react-navigation/native@^6.0.0 @react-navigation/native-stack@^6.0.0
  

• 彻底清理并重装依赖

  1. 删除本地依赖目录和锁文件：

     rm -rf node_modules package-lock.json yarn.lock
     

  2. 重新安装所有依赖：

     npm install # 或 yarn install
     

  3. 再次重置Metro缓存并重启项目：

     npx react-native start --reset-cache
     

• 检查Metro配置
  打开项目的metro.config.js，确保配置中没有错误排除@react-navigation/native-stack相关模块。如果使用了自定义resolver规则，确认sourceExts包含必要的文件扩展名（如.js, .jsx, .ts, .tsx）。

内容的提问来源于stack exchange，提问作者raul redondo garcia