Hey all, I just started messing with Wasm, I can run my app locally on the dev server, but when I th...

# webassembly

[Ryan]

Hey all, I just started messing with Wasm, I can run my app locally on the dev server, but when I threw it up on Github and put it on pages, I see this in the DevTools

Uncaught (in promise) LinkError: WebAssembly.instantiate(): Import #25 module="js_code" function="kotlin.wasm.internal.instanceOf": function import requires a callable

[Igor Yakovlev]

Hi, how do you initialise your wasm module there?

[Ryan]

I believe its being done from the generated composeApp.uninstantiated.mjs

[Igor Yakovlev]

It looks like it is not. Please, check composeApp.uninstantiated.mjs for the kotlin.wasm.internal.instanceOf field in js_code object

[Ryan]

You are right, its not there, but it is when I run it on the local dev server, why would that be?

[Ryan]

I am using wasmJsBrowserDistribution to generate the files

[Ryan]

Never mind, it seems like a clean and build fixed it

[Rok Oblak]

Seems like this is a persistent issue - on a fresh project (via the wizard), doing wasmJsBrowserProductionRun (or wasmJsBrowserProductionWebpack), any external function call throws this error.

Clean build fixes it, but I feel like this is an issue that should be resolved in the gradle task itself (and probably without doing the entire clean?).

Minimal reproducible scenario:
1. create a new fresh CMP project from the wizard
2. create a regular (non-production) browser run first
3. then create a production run (or deploy a production webpack to a site)
Code:

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) {
        val currentPath = window.location.pathname // This crashes
        Text("current path: $currentPath")
    }
}

I searched but didn't see an issue created yet.

[Svyatoslav Kuzmich [JB]]

Hey @Rok Oblak, I’m can’t reproduce it.

I’m doing:
1. Download Web-only project from https://kmp.jetbrains.com/
2. Replace main.kt with your code
3. ./gradlew wasmJsBrowserDevelopmentRun
4. ./gradlew wasmJsBrowserProductionRun
I see both runs succeed. I’m I doing this correctly?

[Rok Oblak]

I can see one thing, once I do a clean build for one time, then I can start regular and production runs without errors without any further cleans.
But if I add this (i.e. more external calls):

val test = window.document.body?.toString()
Text("Test: $test")

and first do dev run, then start a production run, then I see:

And after that again if I clean first, it works.
Chrome, Mac 14.4.1

[Svyatoslav Kuzmich [JB]]

Reproduced it by adding your line with a new external call, thanks!

[dewildte]

Aha! I had the same problem.
I am excited to test the clean and re-build workaround!

[Svyatoslav Kuzmich [JB]]

FYI bug ticket https://youtrack.jetbrains.com/issue/KT-69154