Solito monorepo下NextJS中React Native Skia手动Webpack配置位置咨询

问题详情 #

移动端（Expo）运行正常，但NextJS构建时，React Native Skia因找不到react-native-reanimated/package.json抛出警告并导致构建失败，错误信息如下：

warn ../../node_modules/@shopify/react-native-skia/lib/module/external/reanimated/moduleWrapper.js Module not found: Can't resolve 'react-native-reanimated/package.json' in '/Users/apple/Documents/frontend/node_modules/@shopify/react-native-skia/lib/module/external/reanimated'

解决方案 #

根据Skia的Webpack配置要求，需在Next.js配置中添加模块解析别名，让Webpack定位到正确的文件。结合Solito monorepo的基础配置，正确的合并方式如下：

完整配置示例 #

const { withSolito } = require('solito/next')

module.exports = withSolito({
  reactStrictMode: true,
  transpilePackages: [
    'react-native',
    'react-native-reanimated',
    '@shopify/react-native-skia',
    // 保留你原有配置中的其他转译包
  ],
  webpack: (config, { isServer }) => {
    // 添加Skia所需的别名映射
    config.resolve.alias['react-native-reanimated/package.json'] = '@shopify/react-native-skia/lib/web/package.json'
    
    // 保留原有Webpack逻辑（比如Solito的默认处理）
    return config
  },
})

关键配置说明 #

• transpilePackages：必须包含react-native-reanimated和@shopify/react-native-skia，确保Next.js转译这些原生包的代码，避免Web端兼容问题。
• webpack.resolve.alias：将缺失的react-native-reanimated/package.json映射到Skia为Web环境提供的替代文件，直接消除模块未找到的警告。

注意事项 #

• 如果你的现有配置中已经存在webpack函数，直接在函数内部添加别名配置即可，不要覆盖原有逻辑。
• 确保react-native-reanimated版本与Skia兼容，建议参考Skia官方文档的依赖要求。

内容的提问来源于stack exchange，提问作者Arjun-Dm