A modern programming language that makes developers happier.

kotlinlang

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

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```

*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.

ChatGPT suggests that I should implement versioning for all crirtical files like:
```composeApp.abc123.js
f863831ad84d67a0701b.def456.wasm
dd568dbcd078c0adf7cf.ghi789.wasm```
&gt; 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.

Right, sounds like a problem with browser cache.

wasm file name already should look like `&lt;hash&gt;.wasm` , but it’s not case for js

you can rename js manually or with webpack

alternatively, in the place you include js file you can add fake qury parameter, like `foo.js?p=&lt;x&gt;` changing `x` will force reloading a script.

```<script defer type="application/javascript" src="composeApp.js?v=070325"></script>```
```commonWebpackConfig {
    outputFileName = "composeApp.js?v=070325"```
Works! <@U0BMF6PDJ> thank you :heart:

I wish I knew how to automate it :sweat_smile:

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

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

actually webpack should be able to generate names with hash

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```

did 5 deployments today - everything works smooth :relieved: