1

What I am seeing is adding the react-native-reanimated babel plugin (react-native-reanimated/plugin) is causing source maps to be invalid when bundling. I am using Bugsnag and it is saying my source map does not match my code.

Is anyone else using reanimated 2 and experiencing this? Does anyone have any suggestions for workarounds for this? I cannot solve some bugs reported on Bugsnag because of this.

Thanks for the help!

I validated the source map using the npm package sourcemap-validator and it indeed throws an error saying the source map doesn't match the bundle.

I have reproduced this with a new react-native init project. This error occurs in my project using react-native 0.66.4 and in the sample app with react-native 0.70.6

Sample App https://github.com/MorganTrudeau/rn-sample

There is a README in the repo with steps to reproduce the invalid source map.

Short explanation of what I have done to verify map sourcemap and why I think it is the reanimated babel plugin.

Steps to verify sourcemap

All this code is in the repo provided above to test yourself.

// babel.config.js

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

// Create the bundle and sourcemap
npx react-native bundle --platform android --dev false --entry-file index.js --reset-cache --bundle-output index.android.bundle --sourcemap-output index.android.bundle.map --minify false

// validate_sourcemap.js
// Sourcemap validation code using sourcemap-validator library

var validate = require('sourcemap-validator'),
  fs = require('fs'),
  assert = require('assert'),
  min = fs.readFileSync('index.android.bundle', 'utf-8'),
  map = fs.readFileSync('index.android.bundle.map', 'utf-8');

assert.doesNotThrow(function () {
  validate(min, map);
}, 'The sourcemap is not valid');

console.log('Valid source map');

The verification above fails with react-native-reanimated/plugin. If you remove the react-native-reanimated/plugin and re-bundle and run the verification again it passes.

I have tested on a fresh react-native init project. I am assuming this is why my sourcemaps are not working on Bugsnag.

Thanks.

morganTrudeau
  • 81
  • 2

0 Answers0