Assets from remote chunks

[bjornallvin]

Environment

Release version of the TesterApp for Android. Latest version of this repository (2.5.1) Emulator: API 28, Android 9.0

Description

Can't get image to show from remote chunks. I have remote chunks being loaded as it should. But images do not show up. The image I'm expecting to show is the callstack logo in the MiniApp. It works fine in development mode.

Reproducible Demo

I'm building a release version APK of the TesterApp and installing it on my emulator like this

cd packages/TesterApp/android
./gradlew assembleRelease
adb install app/build/outputs/apk/release/app-release.apk

I'm using Netlify to host the contents from the remote folder that is generated. In my case its at https://unruffled-mcnulty-356845.netlify.app/ I check to see that all files from the generated remote folder is actually there.

The only change in the source code (see below) is the reference to the location of the remote chunks in file packages/TesterApp/index.js. On line 11 I'm changing url: 'http://localhost:5000/${chunkId}', to url: 'http://unruffled-mcnulty-356845.netlify.app/${chunkId}',

Workaround:ish

I can get the image to show in the remote chunk code by also including the image in a local chunk. If I use the same png and show it in packages/TesterApp/src/App.js it is also displayed in the remote chunk. But this is of course not really viable as I would like to host the image remotely only.

Possibly related

I've actually had to make another change in the source code. I had to turn of Hermes compilation in the build.gradle script. Othervise i get this error on starting the app:

FATAL EXCEPTION: mqt_js
Process: com.testerapp, PID: 7204
com.facebook.jni.UnknownCppException: Unknown
	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:873)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
	at android.os.Looper.loop(Looper.java:193)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
	at java.lang.Thread.run(Thread.java:764)

But I don't think this is related to the images not showing up.

[zamotany]

There's a bit of a problem with the images from remote chunks. Actually with all assets from remote chunks. The issue is that in order to display image we need to know the final URL of where the image will be hosted, but we don't have that information.

I have couple of ideas how to deal with it, but for now the best option is if you upload the image (or asset) to server/CDN and use http URL in <Image /> component. Alternatively, you can configure Webpack to inline the images as base64 encoded URI.

[bjornallvin]

Sounds like a tricky problem for sure. I dont think updating the source code is an option for us. Huge codebase :-). I'm investigating implementing a feature to automatically upload assets to CDN and change how the asset is registered in your 'assetsLoader.js' webpack loader. We'll see how that goes :-)

[RafikiTiki]

@bjornallvin – Good news, thanks to @jbroma great work (https://github.com/callstack/repack/pull/331) we have first-class support for remote assets. Please check it out :)