[Android] Setting --sourcemap-output in extraPackagerArgs in project.ext.react breaks bundling

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Adding --sourcemap-output flag to project.ext.react config in android/app/build.gradle breaks bundling (with bundleRelease for example) when Hermes is enabled.

This doesn’t happen when Hermes is disabled.

Tested on Windows 10 and macOS Big Sur.

React Native version:

Device info

System: OS: Windows 10 10.0.19043 CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 5.41 GB / 15.95 GB Binaries: Node: 14.17.3 - ~\AppData\Local\Temp\yarn–1632189645387-0.8024281640590405\node.CMD Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn–1632189645387-0.8024281640590405\yarn.CMD npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Watchman: 20200816.222424.0 - C:\Users\tomas\AppData\Local\watchman\bin\watchman.EXE SDKs: Android SDK: API Levels: 23, 25, 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2 System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom Android NDK: Not Found Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled AllowAllTrustedApps: Enabled Versions: 10.0.17763.0 IDEs: Android Studio: Version 4.1.0.0 AI-201.8743.12.41.7042882 Visual Studio: 15.9.28307.1274 (Visual Studio Community 2017) Languages: Java: 15.0.2 - C:\Program Files\AdoptOpenJDK\jdk-15.0.2.7-hotspot\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.1 => 0.65.1 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a new project with npx react-native init
2. Enable Hermes in app/build.gradle
3. Add extraPackagerArgs: ["--sourcemap-output", "$rootDir/sourcemap.android.js"] to project.ext.react
4. run cd android && ./gradlew bundleRelease

Expected Results

AAB is created successfully and sourcemap is created in android/sourcemap.android.js

Snack, code example, screenshot, or link to a repository:

I think it doesn’t make much sense to create a repo since you can reproduce this with the minimum project created by react-native cli.

Just in case, sourcemap is created successfully in the desired path, but react-native seems to have hardcoded the path:

info start relativating source map
info finished relativating
info Writing bundle output to:, C:\Users\tomas\Workspace\SourcemapBugRepro\android\app\build\generated\assets\react\release\index.android.bundle
info Writing sourcemap output to:, C:\Users\tomas\Workspace\SourcemapBugRepro\android/sourcemap.android.js
info Done writing bundle output
info Done writing sourcemap output
info Copying 1 asset files
info Done copying assets

...

Error: ENOENT: no such file or directory, open 'C:\Users\tomas\Workspace\SourcemapBugRepro\android\app\build\intermediates\sourcemaps\react\release\index.android.bundle.packager.map'
    at Object.openSync (fs.js:498:3)
    at Object.readFileSync (fs.js:394:35)
    at Object.<anonymous> (C:\Users\tomas\Workspace\SourcemapBugRepro\node_modules\react-native\scripts\compose-source-maps.js:33:43)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'C:\\Users\\tomas\\Workspace\\SourcemapBugRepro\\android\\app\\build\\intermediates\\sourcemaps\\react\\release\\index.android.bundle.packager.map'

It seems the culprit of this is react.gradle Hermes bundling:

commandLine(*execCommand, bundleCommand, "--platform", "android", "--dev", "${devEnabled}",
                "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir,
                "--sourcemap-output", enableHermes ? jsPackagerSourceMapFile : jsOutputSourceMapFile, *extraArgs)

As you can see here --sourcemap-output", enableHermes ? jsPackagerSourceMapFile : jsOutputSourceMapFile, jsPackagerSourcemapFile is used as default, but can be overridden by *extraArgs.

This isn’t a problem per se, but later we see:

if (enableHermes) {
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
    commandLine("cmd", "/c", *nodeExecutableAndArgs, composeSourceMapsPath, jsPackagerSourceMapFile, 
    jsCompilerSourceMapFile, "-o", jsOutputSourceMapFile)
} else {
   commandLine(*nodeExecutableAndArgs, composeSourceMapsPath, jsPackagerSourceMapFile, jsCompilerSourceMapFile, "-o", 
   jsOutputSourceMapFile)
  }
} 

Here jsPackagerSourceMapFile is used as the only option which is “hardcoded” as: def jsPackagerSourceMapFile = file("$jsIntermediateSourceMapsDir/${bundleAssetName}.packager.map").

With this:

// app/build.gradle

project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing,
    sourcemapOutput: "$rootDir/sourcemap.android.js"
]

// react.gradle

def jsPackagerSourceMapFile = config.sourcemapOutput ?: file("$jsIntermediateSourceMapsDir/${bundleAssetName}.packager.map")

Bundling works just fine but since I’m not an expert in Gradle and bundling and such things I can’t really tell if this is a good solution or just a patch.

[taltrui]

In case anyone needs this, until this get fixed (or not), I’ve made a patch so it can be used with patch-package. Just remember to change .txt to .patch (Github doesn’t allow .patch files 🤷 )

react-native+0.65.1.txt

diff --git a/node_modules/react-native/react.gradle b/node_modules/react-native/react.gradle
index 84b1f60..41c764c 100644
--- a/node_modules/react-native/react.gradle
+++ b/node_modules/react-native/react.gradle
@@ -105,7 +105,7 @@ afterEvaluate {
         def jsBundleFile = file("$jsBundleDir/$bundleAssetName")
         def jsSourceMapsDir = file("$buildDir/generated/sourcemaps/react/${targetPath}")
         def jsIntermediateSourceMapsDir = file("$buildDir/intermediates/sourcemaps/react/${targetPath}")
-        def jsPackagerSourceMapFile = file("$jsIntermediateSourceMapsDir/${bundleAssetName}.packager.map")
+        def jsPackagerSourceMapFile = config.sourcemapOutput ?: file("$jsIntermediateSourceMapsDir/${bundleAssetName}.packager.map")
         def jsCompilerSourceMapFile = file("$jsIntermediateSourceMapsDir/${bundleAssetName}.compiler.map")
         def jsOutputSourceMapFile = file("$jsSourceMapsDir/${bundleAssetName}.map")
 

Then you can use sourcemapOutput in app/build.grade:

// app/build.gradle

project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing,
    sourcemapOutput: "$rootDir/sourcemap.android.js"
]

Of course this patch is for 0.65.1 since it’s the version I’m using, but since changing sourcemap output path should be broken in older versions as well, this should work as well.

[cortinico]

Since without Hermes it was supported (or at least worked with no problems). seemed logical to me it should or atleast could work with Hermes too.

In theory, yes. Practically speaking, we’re trying to limit the amount of configurable parts to expose only what is really necessary (or what is needed by a significant amount of users).

As this can be solved on your action’s end, feels like the preferred approach at this stage. Should we receive more use cases of users needing to do this, we’re happy to re-evalute