react-native-agora报错：不支持的文件扩展名问题求助

错误信息 #

错误：node_modules/react-native-agora/src/specs/AgoraRtcSurfaceViewNativeComponent.tsx: /Users/mac/Documents/VideoCalling/node_modules/react-native-agora/src/specs/AgoraRtcSurfaceViewNativeComponent.tsx: 无法解析文件'/Users/mac/Documents/VideoCalling/node_modules/react-native-agora/src/specs/AgoraRtcSurfaceViewNativeComponent.tsx'。不支持的文件扩展名。

系统环境 #

• MacOS: 14.3
• React-native: 0.73.4
• react-native-agora: 4.2.6

解决方法 #

1. 配置Metro支持TSX扩展名 #

React Native 0.73+的Metro配置可能未默认支持第三方库的TSX文件，需显式添加：

• 项目根目录找到或创建metro.config.js
• 修改配置，确保resolver.sourceExts包含tsx：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'tsx'],
  },
});

2. 清除缓存并重建 #

缓存异常可能导致配置不生效，执行以下命令：

• 重置Metro缓存：npx react-native start --reset-cache
• 重新安装依赖：yarn install（或npm install）
• 重启项目：npx react-native run-ios（或run-android）

3. 降级react-native-agora版本 #

当前4.2.6版本可能与RN0.73存在兼容性问题，尝试降级到适配版本：

• 卸载当前版本：yarn remove react-native-agora（或npm uninstall react-native-agora）
• 安装兼容版本（如4.2.0，需确认适配RN0.73）：yarn add react-native-agora@4.2.0（或npm install react-native-agora@4.2.0）
• 重新构建项目

4. 临时修改库文件扩展名（应急方案） #

若以上方法无效，可临时修改库文件扩展名：

1. 找到node_modules/react-native-agora/src/specs/AgoraRtcSurfaceViewNativeComponent.tsx
2. 将扩展名改为.ts（即AgoraRtcSurfaceViewNativeComponent.ts）
3. 修改库内所有引用该文件的路径
   注意：此方法在依赖重新安装后会失效，仅作临时应急用

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