"Asset Not Found" loading a HTML file into WebView in SDK 32 (updated: due to postMessage usage)

[rikkitissier]

[edit] See the post below this one for more accurate diagnosing of the problem

Hi all,

I’ve recently upgraded to SDK 32 and I’m hitting an issue that’s a showstopping problem for us.

I have a web-based rich text editor that is compiled into a single HTML file using webpack, to /web/index.html, and is about 435KB. Then, in one of my components I require this file and use it in the source prop of a <WebView>. In SDK 30 this worked perfectly.

After upgrading to SDK 32, the webview just shows “Asset Not Found”. If I cut the index.html file down to just a paragraph then it loads fine, so my instinct is that it’s a filesize issue. However, I’ve tried other approaches to solving it with no success.

I’ve tried loading the file using expo’s Asset module (Asset.fromModule(require("../../../web/dist/index.html").uri). Again, I get Asset Not Found in the WebView. However, if I console.log the result of Asset.fromModule and paste the uri value into a regular web browser, my index.html file loads perfectly well! So, the asset is getting bundled and is available, but isn’t loading in the WebView. I’ve added the following to my app.json:

"assetBundlePatterns": [
	"**/*"
],
"packagerOpts": {
	"assetExts": ["html", "js", "map"]
}

I’ve also tried moving my index.html file to expo’s /assets folder rather than my own /web folder, just in case it was treated differently by expo. It doesn’t seem to be, because I have the same result.

When the Asset Not Found error occurs, my console shows:

Error: invalid asset file path: `${filePath}
    at Object.parse (<path>/node_modules/metro/src/node-haste/lib/AssetPaths.js:66:11)
    at <path>/node_modules/metro/src/Assets.js:312:34

This is a critical issue for us, so I’m hoping someone has an idea of what may be happening here. Thanks in advance for any assistance!

[rikkitissier]

After more debugging, I’ve discovered I’m completely wrong about the cause. It’s nothing to do with filesize - it’s due to postMessage between the React app and the webview.

React Native uses URL changes to facilitate postMessage, but as soon as a message fires and the WebView URL changes, the “Asset Not Found” message appears. If I inspect the URL of the webview, I can see it’s mangling the Expo bundler URL and creating an invalid URL. Example URLs:

Initial: http://127.0.0.1:19001/assets/web/dist/index.html?platform=ios&hash=038dadc697422e4924b3fdf5563de67e

When postMessage fires: http://127.0.0.1:19001/assets/web/dist/ReactABI32_0_0-js-navigation://postMessage?

Am I doing something wrong here or is this an Expo issue?

Thanks!

[rikkitissier]

It seems as though this is a known issue that’s been awaiting a fix January unfortunately: onMessage/postMessage WebView Communication not work on Expo 32 but work on Expo 31 or below · Issue #3168 · expo/expo · GitHub

For now, the useWebkit={true} option seems to be working for me, so hopefully that’s all I’ll need to do until SDK 33 is out.