Notes on my efforts to add a wasmJs target to an e...

# webassembly

[Brendan Weinstein]

Notes on my efforts to add a wasmJs target to an existing ios+android jetpack compose multiplatform project

[Brendan Weinstein]

https://stackoverflow.com/questions/77939582/illegalstateexception-the-driver-used-with-sqldelight-is-asynchronous-so-sqlde

would have been stranded without this stackoverflow. was seeing the below error

IllegalStateException: The driver used with SQLDelight is asynchronous, so SQLDelight should be configured for
asynchronous usage:

even after I had already switched my db config to have generateAsync = true

went through the project to global replace

executeAsList -> awaitAsList
executeAsOne -> awaitAsOne
etc.

and that cleared this particular error

---------

[Brendan Weinstein]

Good to wrap everything in a try-catch in the wasmJs main() function. I wasn't getting comprehendible error messages in console without doing that. searched slack here to find that pro tip.

there are still some cases like in my first comment where the exceptions produced by wasmJs are completely unhelpful

[Brendan Weinstein]

----------
For setting up sqldelight to work with wasm, I cloned <https://github.com/IlyaGulya/sqldelight/tree/feature/wasmjs-web-worker> locally. I published locally but had some issues with my project expecting a timestamp at the end of the snapshot dependency name. I renamed the name of the project that gets published to maven local to end in -local instead of -SNAPSHOT .

iirc that cleared one stumper for testing wasmJs target with sqldelight.

it wasn't obvious to me until I dug through the code that I should follow the same setup as instructed for kotlin-js projects on the sqldelight docs. need the below deps for your wasm target

wasmJsMain.dependencies {
         implementation(libs.web.driver)
         implementation(npm("@cashapp/sqldelight-sqljs-worker", "2.0.2"))
         implementation(npm("sql.js", "1.8.0"))
         implementation(devNpm("copy-webpack-plugin", "9.1.0"))
      }

You also need to add a webpack.config.d folder that is located at the same level as src folder for the module holding your wasmJs sourceset. That folder needs to contain below config to ensure the sql wasm implementation gets exported with your app

// {project}/webpack.config.d/sqljs.js
config.resolve = {
    fallback: {
        fs: false,
        path: false,
        crypto: false,
    }
};

const CopyWebpackPlugin = require('copy-webpack-plugin');
config.plugins.push(
    new CopyWebpackPlugin({
        patterns: [
            '../../node_modules/sql.js/dist/sql-wasm.wasm'
        ]
    })
);

----------------

[Brendan Weinstein]

Now I am running into the below error

WebWorkerException: {"message":"no such table: {TableName}","name":"Error"}

it looks like I need to restructure my app startup code to make sure I wait for table creation to finish

KExitDatabase::class.schema.awaitCreate(driver)

[Brendan Weinstein]

And I have a very basic version of my app running in the browser now (lots of corners cut and things stubbed out)! very cool

wasmDemo.mov

[Brendan Weinstein]

Caught what I believe is one bug with kotlinx datetime. seeing this error

IllegalTimeZoneException: JsException: unsupported ZoneId:Europe/Zurich

I don't hit the same error on ios and android targets.

[אליהו הדס]

1000011322.jpg

[Brendan Weinstein]

thanks! yes, I am using that now. It wasn't readily obvious to me that the joda-time comment was applicable to wasmJs