https://kotlinlang.org logo
Join SlackCommunities
Powered by
I have developed a KMP app which I want to distrib...
# compose-web
m
I have developed a KMP app which I want to distribute as a PWA. This worked nicely until recently. After updating some libraries and making some changes, using the desktop variant for testing, I now realize that the wasmJs variant does not work anymore. In the middle of my regular log outputs I find a WebAssembly.Exception and I have not the slightest idea where that comes from. The app just hangs and does not show any GUI. The problem is that the lengthy output in the browser console does not provide any hint to me where to start looking. Maybe someone has an idea how to interpret that output. I am lost at the moment. I have attached the output in the thread.
Bildschirmfoto 2025-03-03 um 14.58.49.png
Update: When I run the app via 
wasmJsBrowserDevelopmentRun
I get:
Copy code
Uncaught runtime errors:
ERROR
[object WebAssembly.Exception] handleError@webpack-internal:///../../node_modules/webpack-dev-server/client/overlay.js:252:58 createOverlay/<@webpack-internal:///../../node_modules/webpack-dev-server/client/overlay.js:275:18
This is equally mysterious to me. Are there any known problems with webpack?
Via try and error I found that the problem can be solved by just going back to Compose `1.8.0-alpha02`without changing anything else. Everything beyond that (
1.8.0-alpha03
.. 
1.8.0+dev2134
) is broken. I’d like to file an issue about this but I don’t know what to write other than that a mysterious WebAssembly.Exception is thrown somewhere for unknown reasons which was not thrown before. Debugging Wasm is not very pleasant 🧐.
w
I've also been trying to ship a CMP PWA and yeah, the errors are nebulous. Have you tried the new exception proposal flag? You'll also need Chrome Canary with all of the Wasm experimental flags enabled.
That will usually point you to a method compilation error, although unfortunately not to the actual offending code. I think this is JIT, so it only happens when the code is loaded. So you can manually comment out code until it works.
Keep in mind that toggling this will require a clean build (and maybe --rerun-tasks) and if you're using a service worker, you'll also have to clear the cache/hard exit to ensure it's loading the new binaries.
For CMP 1.8.0-alpha03 specifically, I had an issue with 
kotlinx.datetime.Companion.parse
, caused by one of my Navigation library custom NavTypes trying to serialize a datetime class. Removing that allowed me to take the update successfully.
I'm also compiling a local version of Coil3 against alpha03, but I don't know if that's required.
1.7.3 -> 1.8.0 has been a massive mess of binary ABI breakages and broken library support. I really hope this stuff is ironed out by release of 1.8.0, because figuring it out has taken a ridiculous amount of time.
m
Do you have a pointer to this new stuff? I haven’t seen that yet. I also use a worker because the PWA is supposed to work offline too (which it does if it works at all). In order to enforce loading of new code I always update the cache id via the build number. That helps. This all does not sound very reliable yet. I am going into production in four weeks 😲.
w
My entire app/setup is open source if it helps at all, but keep in mind that I barely know what I'm doing. It's been a lot of head against wall to get this to work.
m
but keep in mind that I barely know what I’m doing. It’s been a lot of head against wall to get this to work. (bearbeitet)
Yes, but at least we are two now in that category 😉.
w
Oh, also, the reason I have it commented out is that you need to disable it for production. Any browser without the experimental flags will fail to load the page with it enabled, which is really unfortunate. I have a bunch of commits which are solely re-commenting that flag. 😭
It might be better to just pass it manually to the Gradle command.
b
@Michael Paus @Winson Chiu Hi! Sorry for inconvenience. Does turning on a new exception handling help you?
I guess the problem is that there is an uncaught JS exception
w
I'd say half of the time the new exception handling points me to something I can debug, but other times I just get exceptions in Compose and those are much harder to figure out. They're very far from the offending code, usually deep in Compose internals, and clicking through stacktraces like in JVM land isn't as easy when all of the lines point inside the .wasm file. Not sure what can be done about that though.
b
The most likely issue inside Compose
at least it sounds like that
so if you have a repro please report it
even non-small one could be useful
stacktrace also could be super useful
m
@bashor I have set up a failing version of my project in public. It was compiled with compose 
1.8.0-alpha03
and I think I activated the new exception handling. Of course I have no influence on how the used libraries are compiled. I used the task 
wasmJsBrowserDevelopmentExecutableDistribution
When I run it either in the latest Firefox, Chrome or Safari I get strange exceptions which I cannot make any sense of. Here is the link: https://mpmediasoft.de/test/JavaForumStuttgartApp/JFSWebApp/index.html Here is the link to the working version compiled with 1.8.0-alpha02. https://jfspwa.java-forum-stuttgart.de/
b
@Michael Paus as I can see it’s CMP-7571 which is fixed in upcoming 2.1.20-RC2
Also updating other library dependencies without updating toolchain may help, in the published example it fails due to incompatibility with navigation library.
m
Update: This issue seems to be resolved for me by a combined update to:
Copy code
kotlin     = "2.1.20"
compose    = "1.8.0-beta01"
lifecycle  = "2.9.0-alpha05"
navigation = "2.9.0-alpha15"
👍 2
46 Views
Open in Slack
PreviousNext
Powered by