Update, source-maps can now be built without modifying any react-native scripts + make them smaller

[IjzerenHein]

Hi, I would like to share a better way to build source-maps for your App, without having to modify or copy any react-native scripts in the node_modules folder.

For android, add this to your android/app/build.gradle file.

project.ext.react = [
	...
	extraPackagerArgs: [
		"--sourcemap-output", "$buildDir/intermediates/assets/release/index.android.bundle.map",
		"--sourcemap-sources-root", "$rootDir/.."
	]
]

And as of react-native 0.55, you can now do the same on iOS. In your XCode project file, update the Bundle React Native code and images build phase to this:

export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh

As you may have noticed see, you can also specify the option sourcemap-sources-root. When set correctly, the paths stored in the source-map file are much shorter, and therefore the source-map file becomes a lot smaller. I tested this extensively and in my case the source-map file went down from 17MB to 11MB and the stack-trace is better readable (paths all start from your project-root).

Cheers, Hein

[schavaLogi]

I observed this is not working in RN 0.52
export EXTRA_PACKAGER_ARGS="--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/.."

[mvayngrib]

@IjzerenHein is there a way for that path to be based on the buildType? For example, i have release and releaseStaging under buildTypes, and I want the source maps to be written to the respective folders (assets/release vs assets/releaseStaging)

[isaaclem]

@IjzerenHein : First of all thank you very much for sharing this valuable information.

I wasn't from Native side and so couldn't understand about the iOS side of configuration

export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh

I can see that in my project.pbxproj file, there are two sections of code having the keyword Bundle React Native code and images

00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
			isa = PBXShellScriptBuildPhase;
			buildActionMask = 2147483647;
			files = (
			);
			inputPaths = (
			);
			name = "Bundle React Native code and images";
			outputPaths = (
			);
			runOnlyForDeploymentPostprocessing = 0;
			shellPath = /bin/sh;
			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
		};

		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
			isa = PBXShellScriptBuildPhase;
			buildActionMask = 2147483647;
			files = (
			);
			inputPaths = (
			);
			name = "Bundle React Native Code And Images";
			outputPaths = (
			);
			runOnlyForDeploymentPostprocessing = 0;
			shellPath = /bin/sh;
			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
		};

Wondering if you are kind enough to point me to the correct direction? Thanks in advance

[ristomatti]

This is not related to react-native-source-maps but as a FYI to others - the $EXTRA_PACKAGER_ARGS method for Xcode / iOS suggested by @IjzerenHein breaks if there's whitespace somewhere on the path. I tried various methods of escaping the whitespace or quoting the path but none worked.

My conclusion was that it's not possible to pass a parameter and an escaped path within a single bash variable. See the explanation here on the top voted answer: https://superuser.com/questions/360966/how-do-i-use-a-bash-variable-string-containing-quotes-in-a-command

[twelve17]

@ristomatti I ran into the same. In the end, I had to copy the node_modules/react-native/scripts/react-native-xcode.sh to my own repo, and modify it to accept source map parameters individually, so that I could quote each one:

"$NODE_BINARY" $NODE_ARGS "$CLI_PATH" $BUNDLE_COMMAND \
  $CONFIG_ARG \
  --entry-file "$ENTRY_FILE" \
  --platform ios \
  --dev $DEV \
  --reset-cache \
  --bundle-output "$BUNDLE_FILE" \
  --assets-dest "$DEST" \
  --sourcemap-output "$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/sourcemap.ios.js.map" \
  --sourcemap-sources-root "$SRCROOT/.." \
  $EXTRA_PACKAGER_ARGS

[ristomatti]

@twelve17 Thanks for the reply. I don't anymore work in this project team but how I solved it myself was to create a patch file to do a similar thing. Basically the Xcode script copied the file in the bulld dir, patched it and then ran the patched file. This way I was able to circumvent having to copy the file to our repo and possibly allow easier upgrades in the future.

[twelve17]

@ristomatti great idea!