Has anyone experienced freezing issues after deploying a Compose/Wasm app to Cloudflare Pages?

# webassembly

[Andrey Yegorov]

Has anyone experienced freezing issues after deploying a Compose/Wasm app to Cloudflare Pages?

[Andrey Yegorov]

I frequently encounter browser cache problems after deploying updates. The web console reports the following error:

composeApp.uninstantiated.mjs:131 IllegalArgumentException: Invalid symbol '_'(137) at index 7
kotlinx.coroutines.error_$external_fun @ composeApp.uninstantiated.mjs:131

[Andrey Yegorov]

Steps to reproduce:
1. Confirm that the WASM app is working properly on the web.
2. Deploy with the following commands:
a. ./gradlew clean
b. rm -rf composeApp/build/dist/wasmJs/productionExecutable
c. ./gradlew wasmJsBrowserDistribution
d. wrangler pages deploy composeApp/build/dist/wasmJs/productionExecutable --project-name myaiphotoshoot --commit-dirty=true
3. Purge the Cloudflare cache.
4. Open the WASM app. It freezes unless you use Incognito mode or perform a hard cache reset in Chrome. This freeze occurs in both Chrome (mobile/desktop) and Safari. However, it only happens with existing sessions and goes away by itself after a few days.

[Andrey Yegorov]

ChatGPT suggests that I should implement versioning for all crirtical files like:

composeApp.abc123.js
f863831ad84d67a0701b.def456.wasm
dd568dbcd078c0adf7cf.ghi789.wasm

However, browsers (especially Chrome) aggressively cache assets whose filenames never change (composeApp.js and f863831ad84d67a0701b.wasm). Even with must-revalidate, browsers sometimes won’t reliably fetch these updates without a manual cache clear.

[Andrey Yegorov]

but no ideas how to do this

[bashor]

Right, sounds like a problem with browser cache.

[bashor]

wasm file name already should look like <hash>.wasm , but it’s not case for js

[bashor]

you can rename js manually or with webpack

[bashor]

alternatively, in the place you include js file you can add fake qury parameter, like foo.js?p=<x> changing x will force reloading a script.

[Andrey Yegorov]

<script defer type="application/javascript" src="composeApp.js?v=070325"></script>

commonWebpackConfig {
    outputFileName = "composeApp.js?v=070325"

Works! @bashor thank you ❤️

[Andrey Yegorov]

I wish I knew how to automate it 😅

[Andrey Yegorov]

Automated https://chatgpt.com/share/67ca6479-a79c-800b-b663-767d7f3d9eea

[bashor]

I’d avoid using ? in a file name

[Andrey Yegorov]

hm, better do just timestamp.js?

[bashor]

yeah

[Andrey Yegorov]

good idea, thanks

[bashor]

In this case I’d recomend composeApp-<timestamp>.js or composeApp-<hash>.js

[bashor]

actually webpack should be able to generate names with hash

[bashor]

cc @Ilya Goncharov [JB]

[Andrey Yegorov]

Such a big improvement, was suffering a lot. But now no need to purge cache after each deployment and also can make Cloudflare respect existing headers:

/*.html
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  Cache-Control: public, max-age=600, must-revalidate

/*.wasm
  Content-Type: application/wasm
  Cache-Control: public, max-age=31536000, immutable

/*.js
  Cache-Control: public, max-age=31536000, immutable

/*.css
  Cache-Control: public, max-age=31536000, immutable

[Andrey Yegorov]

did 5 deployments today - everything works smooth 😌