triggerUncaughtException with react-native 0.71.2

[frankcalise]

I'm trying to utilize bundle visualizer with the latest react-native and I'm running into this output:

$ yarn run visualizer:release
$ yarn workspace @monorepo/main run react-native-bundle-visualizer --dev=false
$ /Users/fcalise/code/myproject/node_modules/.bin/react-native-bundle-visualizer --dev=false
Generating bundle...
                Welcome to Metro v0.73.7
              Fast - Scalable - Integrated


info Writing bundle output to:, /var/folders/pl/1r8l1pts2r3c2hbcpdbq4ppc0000gn/T/react-native-bundle-visualizer/monorepomain/ios.bundle
info Writing sourcemap output to:, /var/folders/pl/1r8l1pts2r3c2hbcpdbq4ppc0000gn/T/react-native-bundle-visualizer/monorepomain/ios.bundle.map
info Done writing sourcemap output
info Done writing bundle output
Bundle is 2.74 MB in size (unchanged since last run)
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
error Command failed with exit code 1.

Any suggestions or would you like any other information attached? Open to trying patches and other solutions

[hurali97]

Hi @frankcalise,

Thanks for the information. Could you please add your setup details for eg: react-native version and node version? Also if you could share package.json probably dependencies and dev deps only.

[frankcalise]

hey @hurali97 sure thing!

Here is a reproducible repo (with the dep list below). It also did this for me on version 0.71.2 of react-native. I tried both node version 16.14.2 and 18.11.0. I think for this react-native version they suggest 18 but either run the app in this case.

https://github.com/frankcalise/react-native-vanilla-reanimated

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-masked-view/masked-view": "^0.2.8",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.9",
    "@shopify/flash-list": "1.4.0",
    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-reanimated": "2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "3.19.0",
    "react-native-svg": "^13.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-native-bundle-visualizer": "^3.1.2",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },

[hurali97]

Hi @frankcalise, thanks for sharing this. I tried on react-native version 0.70.6 and below, it works fine. Seems there's something that's conflicting in later versions. I should see what's the cause of it.

[hurali97]

UPDATE

@frankcalise I cloned your provided repro and ran yarn visualizer:release and I was able to repro it. However, when I ran yarn visualizer:dev, output was shown in the html report.

See the last one, which is successful output with dev bundle.

If visualising dev bundle helps unblocking you, please go with that. As I don't have any timeline to get this working for release bundle. I will try to prioritise this. 🤝

[frankcalise]

Ok I will try dev again, but I thought I had the same issue. Maybe I'll try with clearing the cache first. Are there any temp files I should clear?

Thanks for looking into it!

[hurali97]

You can try running the visualiser command with --reset-cache flag.

[frankcalise]

@hurali97 visualizer:dev script ran on 0.71.1

And also was able to run visualizer:release when targeting 0.70.6 for ios/android platforms

[hurali97]

Cool, thanks for checking 😃 My wild guess is there's probably something changed in the internals of RN or any third party library. I will try to keep looking for the root cause of this meanwhile, to get this working on recent RN versions in release mode.

[hurali97]

Hi @frankcalise,

I pushed a fix on another branch, you can try it by running following command:

yarn add -D https://github.com/IjzerenHein/react-native-bundle-visualizer.git#fix-set-minify-to-false

I tried to locate the source of issue in a couple of third party packages, including RN-CLI, React-Native and Metro. It turned out that recently metro has defaulted terser as their minifier. Previously, it was uglify which was playing nicely for our implemented solution to use source-map-explorer, which then uses source-map.

Now terser as a minifier for metro generates something which is probably unidentifiable for source-map. So for now, I have disabled --minify option that we can pass to RN-CLI for generating bundle and source map. With this, we can successfully visualise the source map on both dev and release. There's one downside to this approach and that's we will have artifacts generated without minification. But on a broader scale this shouldn't really matter.

For future, I will try to remove this more of a patch fix, and allow us using the minification. As I am not really much familiar with these minifier, transformers stuff, I can't promise a timeline for that, but I will try keep looking for ideas around it.

As of now, this fix/ patch should unblock us even on latest RN versions on both dev and release. Let me know, if this fix works for you. I will try to publish this fix soon. ✨

[frankcalise]

@hurali97 Thanks for your hard work! Yeah they both run now with that patch.

With regards to the minification, does skipping that impact the bundle size that is being reported now? Or is release mode still a true release bundle size?

[hurali97]

Hi @frankcalise,

Yes it impacts the bundle size to some extent as lines, spaces, function names, variable names etc won't be minified due to this. Other than this, release level optimisations must be applied on the bundle. So if you visualize bundle with dev true and later on with dev false, you should see a green line in terminal which would say: "bundle size decreased by __".