Remotion Skia 项目中 react-native 模块解析问题分析与解决方案

问题背景

在使用 Remotion 项目的 Skia 组件时（版本 v4.0.272 及以上），开发者启动 Remotion Studio 会遇到一个模块解析错误。错误信息显示系统无法正确解析 react-native 模块，具体报错指向 @shopify/react-native-skia 包中的 Platform 模块。

技术分析

这个问题的根源在于 Webpack 的模块解析顺序配置不当。在 Remotion 的 enableSkia 功能实现中，当前配置可能导致 Webpack 优先尝试解析 react-native 的原生实现（Platform.ts），而不是预期的 Web 平台实现（Platform.web.tsx）。

深层原因

Webpack 的 resolve.extensions 配置决定了模块解析的优先级顺序。在当前的实现中：

1. 默认扩展名配置（如 .js, .ts 等）被放在了 .web.tsx 之前
2. 这导致 Webpack 会先尝试查找 Platform.ts 而不是 Platform.web.tsx
3. 当找到 Platform.ts 时，它又引用了 react-native 模块，这在 Web 环境中不可用

解决方案

正确的做法应该是：

1. 将特定平台扩展名（.web.tsx）放在默认扩展名之前
2. 确保 Webpack 优先查找 Web 平台特定的实现文件

实现建议

在 enableSkia 的 Webpack 配置中，应该调整 extensions 数组的顺序，确保 .web.tsx 等平台特定扩展名优先于通用扩展名。这样 Webpack 会首先尝试解析 Platform.web.tsx，避免了不必要地加载原生模块。

最佳实践

对于跨平台库的开发，建议：

1. 明确区分不同平台的实现文件
2. 在构建配置中正确设置平台特定文件的解析优先级
3. 在测试时覆盖不同平台的使用场景
4. 保持平台特定实现的接口一致性

影响范围

此问题影响所有使用 @remotion/skia 且需要 Web 平台支持的项目。虽然错误表现为 react-native 模块无法解析，但实际是模块解析策略需要优化。

总结

模块解析策略是跨平台库开发中的关键配置。通过调整 Webpack 的解析顺序，可以确保在不同环境下加载正确的实现文件，避免不必要的平台模块依赖。这个问题也提醒我们，在开发跨平台解决方案时，构建工具的配置需要与项目的多平台支持策略保持一致。