添加react-native-reanimated Babel插件导致Source Map无效求助

问题概述 #

添加react-native-reanimated/plugin到Babel配置后，打包生成的Source Map与bundle不匹配——用sourcemap-validator验证会报错，Bugsnag也提示Source Map与代码不匹配，导致无法定位上报的Bug。该问题在RN 0.66.4和RN 0.70.6的新项目中均可复现。

可行解决方案 #

1. 调整Babel插件加载顺序 #

Reanimated的Babel插件会修改代码AST结构，必须把它放在babel.config.js的插件数组最后一位，避免破坏其他插件生成的Source Map关联信息。示例配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // 所有其他插件都放在前面
    'react-native-reanimated/plugin' // 最后加载这个插件
  ],
};

2. 禁用Reanimated的Hermes转换优化（如果用Hermes） #

如果项目使用Hermes引擎，尝试关闭Reanimated的enableHermesTransform选项，这个优化可能干扰Source Map生成：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['react-native-reanimated/plugin', {
      enableHermesTransform: false
    }]
  ],
};

3. 配置Metro强制生成完整Source Map #

在metro.config.js中明确开启Source Map生成，并调整Transformer选项，确保Metro能正确跟踪Reanimated修改后的代码位置：

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

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    sourceMap: true // 强制生成完整Source Map
  },
});

4. 升级Reanimated到最新版本 #

这个问题大概率是插件的已知Bug，试试升级到最新版的react-native-reanimated，后续版本可能已经修复了Source Map的生成问题：

npm install react-native-reanimated@latest

5. 手动生成Source Map（临时应急方案） #

如果以上方法都无效，可以先打包不带Source Map，再用source-map-generator这类工具手动生成。不过这种方法比较繁琐，仅作为临时解决手段。

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