react-native-gifted-chat报无法解析./InputToolbar模块错误如何解决

问题场景 #

React Native项目集成react-native-gifted-chat聊天组件时，抛出模块解析错误：无法从node_modules/react-native-gifted-chat/lib/GiftedChat.js路径解析模块./InputToolbar。
对应ChatScreen页面核心实现代码如下：

<View style={{flex:1}}>
  <GiftedChat
    messages={messages}
    bottomOffset={49}
    onSend={messages => onSend(messages)}
    renderInputToolbar={renderInputToolbar}
    user={{
      _id: 1,
    }}
  />
  
  {/* <TouchableOpacity onPress={()=>userSignout()}><Text>Don't have an account? Create one</Text></TouchableOpacity>  */}
</View>

// 其余页面逻辑
)
}

export default ChatScreen

const styles = StyleSheet.create({})

修复方案 #

按优先级依次尝试以下操作：

• 清理依赖与Metro缓存
  绝大多数该类报错是依赖安装不全、Metro打包缓存残留导致，按顺序执行以下命令：
  1. 关闭当前正在运行的Metro打包终端
  2. 清理并重新安装依赖：

     # 使用npm的项目
     rm -rf node_modules && rm package-lock.json && npm install
     
     # 使用yarn的项目
     rm -rf node_modules && rm yarn.lock && yarn install
     

  3. 带缓存清理参数重启Metro服务：

     npx react-native start --reset-cache
     

  4. 新终端窗口重新运行项目即可。
• 修正自定义InputToolbar的导入方式
  如果清理缓存后报错仍存在，检查renderInputToolbar自定义方法的实现：2.0及以上版本的react-native-gifted-chat调整了内部组件导出逻辑，禁止通过相对路径引用lib目录下的内部组件，所有子组件需要从包入口显式导入：

  // 错误写法：不要引用内部路径
  // const InputToolbar = require('./node_modules/react-native-gifted-chat/lib/InputToolbar').default
  
  // 正确写法：从包根路径导入
  import { GiftedChat, InputToolbar } from 'react-native-gifted-chat';
  
  // 自定义渲染方法直接使用导入的组件即可
  const renderInputToolbar = (props) => {
    return <InputToolbar {...props} /* 自定义属性 */ />
  }
  

• 降级到稳定版本
  如果以上操作都无法解决问题，卸载当前版本，安装无路径引用问题的稳定旧版：

  npm uninstall react-native-gifted-chat
  npm install react-native-gifted-chat@1.1.1
  

  安装完成后重新执行缓存清理、重启项目的操作即可。

注意：不要直接修改node_modules目录下的源码修复问题，重新安装依赖后修改会直接失效。

内容的提问来源于stack exchange，提问作者zaid shahid