Hello guys, I'm farly new to WASM and I was trying to deploy my app to Github Pages. Before doing i...

# webassembly

[Orfeo Ciano]

Hello guys, I'm farly new to WASM and I was trying to deploy my app to Github Pages.

Before doing it, I luckily thought about testing it on my own server first.

I can run the app on a local web browser through the ./gradlew run command. All good.

So, I've then created my artifact with ./gradlew wasmJsBrowserDistribution . I took the whole content of the productionExecutable and uploaded to my webserver.
When I open the page, it looks like everything loads correctly, however, there is an issue with the WASM.

I have no clue how to troubleshoot/debug it 😛

Can someone help me out?

[Robert Jaros]

can you show the url of the app?

[Orfeo Ciano]

Yep it's just deployed on my raspberry PI
http://raspberry/

I think I've found SOMETHING (maybe). Putting a breakpoint on the javascript I've managed to extract this stack trace.

default
: 
[Exception: ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization at Module.default (webpack-internal:///./kotlin/composeApp.mjs:5:42) at Module.invokeGetter (<anonymous>:3:28) at <anonymous> at <http://raspberry/composeApp.js:167:33> at eval (webpack-internal:///./kotlin/composeApp.mjs:39:14)]
memory
: 
[Exception: ReferenceError: Cannot access 'memory' before initialization at Module.memory (webpack-internal:///./kotlin/composeApp.mjs:6:53) at Module.invokeGetter (<anonymous>:3:28) at <anonymous> at <http://raspberry/composeApp.js:167:33> at eval (webpack-internal:///./kotlin/composeApp.mjs:39:14)]
_initialize
: 
[Exception: ReferenceError: Cannot access '_initialize' before initialization at Module._initialize (webpack-internal:///./kotlin/composeApp.mjs:4:58) at Module.invokeGetter (<anonymous>:3:28) at <anonymous> at <http://raspberry/composeApp.js:167:33> at eval (webpack-internal:///./kotlin/composeApp.mjs:39:14)]

[Robert Jaros]

I've meant a public url 🙂

[Orfeo Ciano]

Ah sorry man. I'll try to expose it, if I can. Give me few mins.

[Orfeo Ciano]

http://cyanotic.servebeer.com/ it should be here.

[Orfeo Ciano]

Hah! That's hilarious. If I run this thing on the same machine I'm developing, it works. Probably zipping/unzipping it makes a differece? Let me try to upload it directly with an FTP. Just in case.

[Robert Jaros]

It seems you have put the content of your build directory instead of only build/dist/wasmJs/productionExecutable

[Orfeo Ciano]

Sorry man, I am still playing with it.

[Orfeo Ciano]

http://cyanotic.servebeer.com:8080/

[Orfeo Ciano]

try with this

[Orfeo Ciano]

I am messing around to try and understand somehow what's going on.

[Orfeo Ciano]

I've created this build using linux.
So, on Windows I've created a local webserver and pointed to the output folder of the project and all went just FINE.

I believe is something to do with the fact that the app is run on a different server that is not localhost.

[Orfeo Ciano]

I think the best way is to try to go back to "hello world" and trace back all the dependencies that I've added in the project and slowing making way through any issues.

[Robert Jaros]

I confirm your app runs fine when run from localhost or 127.0.0.1, but doesn't run when I change this to a public IP address. Unfortunately I have no idea why.

[Orfeo Ciano]

Allright. I'll just try to go backwards and see what's the matter with it 🙂
Thanks a lot for your help 🙂

[Orfeo Ciano]

It must be something obvious, maybe it has something to do with CORS. I'll keep you posted.

[Orfeo Ciano]

Finally found out what's breaking stuff. For some reasons it's Koin. Still investigating...

[Orfeo Ciano]

Yep. It's the 4.0 release that is breaking WASM. The Compose 1.2.0 works flawlessly!

[Robert Jaros]

I'm using Koin 4.0.0-RC2 in my wasmJs apps without problems, so it must be something specific to your project.

[Orfeo Ciano]

I'm using it in a really barebone way:

//ViewModel declaration
val chatModule = module {
    viewModelOf(::ChatViewModel)
}

// Factories declarations
val repositoryModule = module {
    factoryOf(::GenerateRepository)
    factoryOf(::ChatRepository)
    factoryOf(::ModelsRepository)
}

// Singleton declarations
val coreModule = module {
    singleOf(::ThemeState)
    singleOf(::ModelDownloadState)
}

The App initalization is done like this

KoinApplication(::koinConfiguration) {
   val koin = getKoin()
   // basic initialization   
   val themeState = koin.get<ThemeState>()
   val preferences = koin.get<Preferences>()
   //... MainScreen()
}

private fun koinConfiguration() = koinApplication {
    modules(
        coreModule,
        networkModule,
        repositoryModule,
        mainModule,
        onboardingModule,
        chatModule,
        modelsModule,
        settingsModule,
    )
}

And to complete I've got these dependencies

implementation(libs.koin.compose)
implementation(libs.koin.compose.viewmodel)
implementation(libs.koin.compose.viewmodel.navigation)

This is the toml

koin-compose = { group = "io.insert-koin", name = "koin-compose", version.ref = "koin" }
koin-compose-viewmodel = { group = "io.insert-koin", name = "koin-compose-viewmodel", version.ref = "koin" }
koin-compose-viewmodel-navigation = { group = "io.insert-koin", name = "koin-compose-viewmodel-navigation", version.ref = "koin" }

I've been able to reproduce the issue with a minimalistic app.

[Robert Jaros]

It could be something in koin-compose, I'm not using this one.

[Orfeo Ciano]

Most likely. Well, for the time being I'm dropping it.

[Orfeo Ciano]

Allright fingers crossed...removed the whole thing. Let's see if it runs now 😢

[Orfeo Ciano]

Just out of curiosity: are you using Compose? If so, how are you injecting viewModels without koin-compose???

[Robert Jaros]

No, I'm not using compose-web. I'm using my own web framework based on compose runtime, but it's not compose. I'm using koin-core to inject viewmodels created using Ballast framework and it works fine for me.