esbuild serializer causes Gradle to crash when the bundle generates a warning

Question

esbuild serializer causes Gradle to crash when the bundle generates a warning

renchap opened this issue a year ago · 8 comments

What happened?

I configured Metro to use the ESBuild serializer, with the default options.

Using the default react-native-gradle-plugin process, Gradle runs the bundle command when building a release, changed so it runs rnx-bundle:

# app/build.gradle

react {
  bundleCommand = "rnx-bundle"
}

But this happens:

…/android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle:1:51547: warning: the variable "Promise" was not declared in function "bE1"
[22:52:00]: ▸  use strict";(()=>{var lse=Object.create;var cI=Object.defineProperty;var  [the whole 5 MB bundle]
[This repeated 10 times, including the whole bundle, as there are 10 warnings]
…
Exception in thread "pool-1-thread-1" java.lang.OutOfMemoryError: Java heap space

And then the build fails, because the Java process too all available memory trying to output those 5 MB lines.

If I disable whitespace minification in esbuild, then I each error displays the line where it happens, which are short (as there are newline characters in the emitted bundle), and the build goes fine.

Here is the output with whitespace minification disabled:

> Task :app:createBundleReleaseJsAndAssets
warning: the transform cache was reset.
                Welcome to Metro v0.73.9
              Fast - Scalable - Integrated

info esbuild bundle size: 6619674
info Writing bundle output to:, 
…/android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle
info Writing sourcemap output to:, …/android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map
info Done writing bundle output
info Done writing sourcemap output
info Copying 17 asset files
info Done copying assets
…/android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle:2495:20: warning: the variable "Promise" was not declared in function "bE1"
    (yE1 || (yE1 = Promise.resolve())).then(e).catch(function(t) {
                   ^~~~~~~
…/android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle:2496:14: warning: the variable "setTimeout" was not declared in anonymous function " 3#"
      return setTimeout(function() {
             ^~~~~~~~~~
…/android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle:3916:17: warning: the variable "FileReader" was not declared in function "Bue"
    var t = new FileReader(), r = kT1(t);

When I launch the bundle directly from the CLI (react-native rnx-bundle --dev false --platform android), those errors are not displayed, so I am not sure what Gradle does that displays them. Could it be a post-process task, done with Metro once the bundle is created?

Affected Package

metro-serializer-esbuild

Version

0.1.23

Which platforms are you seeing this issue on?

Android
iOS
macOS
Windows

System Information

info Fetching system and libraries information...
System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 67.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: Not Found
    npm: 9.5.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2023.05.01.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /var/folders/cn/qgvjcjx97mj8rc2vx37vgkvh0000gn/T/frum_69495_1683799833063/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 26, 31, 32, 33
      Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0, 33.0.2
      System Images: android-24 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM 64 v8a, android-26 | ARM 64 v8a, android-26 | Google APIs ARM 64 v8a, android-28 | Google ARM64-V8a Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9477386
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 20.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.2.0 => 18.2.0
    react-native: ^0.71.8 => 0.71.8
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

Configure a project to use metro-serializer-esbuild (changing the Metro config is enough, no need for @rnx-kit/cli here)
Have warnings in your bundle
Run ./gradlew bundleRelease to generate release
Check the build output, there is a huge line with the whole bundle when showing the warning location. Gradle may even crash if your bundle is big enough.

Code of Conduct

I agree to follow this project's Code of Conduct

Answer 1 · 2023-05-12T13:39:44.000Z

After investigating a bit more, those errors are printed by hermesc when compiling the bundle during the build phase.

And the same issue also occurs during the iOS build (multi-MB lines printed) but XCode copes well with them and do not crash.

Answer 2 · 2023-05-15T07:12:12.000Z

Do you find the warnings useful? If not, you can suppress them by adding -w to hermesFlag in android/app/build.gradle:

react {
    hermesFlags = ["-O", "-output-source-map", "-w"]
}

Alternatively, try limiting the line width output:

react {
    hermesFlags = ["-O", "-max-diagnostic-width=80", "-output-source-map"]
}

Answer 3 · 2023-05-15T08:26:47.000Z

I do not understand where they come from, and did not spend the time trying to figure out why they are here.

warning: the variable "Promise" was not declared in function "bE1"
the variable "setTimeout" was not declared in anonymous function

Why would those not exist? 🤔

Answer 4 · 2023-05-15T08:35:20.000Z

Most likely because those functions are polyfilled and Hermes can't see them unless you specify where to look: facebook/hermes#342

You can simply disable the warning if the bundle works without issues.

Answer 5 · 2023-05-15T08:38:31.000Z

One other thing: If you're passing this bundle to the Hermes compiler, you can also consider disabling minification altogether. It shouldn't affect the size of the bytecode output.

Answer 6 · 2023-05-22T08:49:48.000Z

I've just learned that you can control the output width using -max-diagnostic-width. I've updated the workaround here: #2416 (comment)

Answer 7 · 2023-05-23T08:23:32.000Z

Just to summarize for all the folks seeing crashes/slowdowns when switching to rnx-bundle in Gradle/Xcode: The gist of the problem is that Hermes is unable to determine the terminal width when run inside Gradle/Xcode and falls back to "unlimited". This causes issues because it essentially means that for every diagnostic/warning, Hermes will output the whole bundle.

I've submitted a fix upstream to limit the output: facebook/react-native#37531

I will close this issue when it lands. In the meantime, you can apply one of the following workarounds:

If you only use Hermes on Android, you can add -max-diagnostic-width=80 in android/app/build.gradle to limit the line width:

react {
    hermesFlags = ["-O", "-max-diagnostic-width=80", "-output-source-map"]
}

Alternatively, if you don't care about the warnings, just disable them:

react {
    hermesFlags = ["-O", "-output-source-map", "-w"]
}

iOS doesn't have an equivalent as far as I can tell. If you also use Hermes on iOS, you can instead disable minifying whitespaces in the esbuild plugin.

If you use the esbuild plugin directly in metro.config.js, add the following:

const { makeMetroConfig } = require("@rnx-kit/metro-config");
const { MetroSerializer, esbuildTransformerConfig } = require("@rnx-kit/metro-serializer-esbuild");

module.exports = makeMetroConfig({
  serializer: {
    customSerializer: MetroSerializer([], {
      minify: true,
      minifyWhitespace: false,  // disable removing whitespace
      minifyIdentifiers: true,
      minifySyntax: true,
    }),
  },
  transformer: esbuildTransformerConfig,
});

If you use rnx-bundle, you can pass a configuration to treeShake:

{
  ...
  "rnx-kit": {
    ...
    "bundle": [
      {
        ...
        "treeShake": {
          "minify": true,
          "minifyWhitespace": false,
          "minifyIdentifiers": true,
          "minifySyntax": true
        }
      }
    ]
  }
}

Either way you configure the plugin, you don't need to change your build.gradle.

Documentation: https://github.com/microsoft/rnx-kit/tree/main/packages/metro-serializer-esbuild#minifywhitespace

Answer 8 · 2023-05-23T15:02:45.000Z

Merged in facebook/react-native@260bcf7