initial sqldelight in KMP for wasmJsMain

I am working on a KMP (Kotlin Multiplatform) project that targets Android, iOS, Desktop, and JS platforms. I have integrated SQLDelight as an ORM for my project by following the official documentation.

In the Common module's build.gradle file, I added the plugin and configured the database as follows:

plugins {
  id("app.cash.sqldelight") version "2.0.2"
}

sqldelight {
    databases {
        create("Database") {
            packageName.set("ir.dorantech.kmp.data.database")
        }
    }
}

However, when building the project, I encounter the following error:

:composeApp:wasmJsMain: Could not resolve app.cash.sqldelight:runtime:2.0.2.
Required by: project :composeApp

Possible solution:
 - Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html

In an attempt to fix the issue, I found a solution for JS and updated my configuration as follows:

sqldelight {
    databases {
        create("Database") {
            packageName.set("ir.dorantech.kmp.data.database")
            generateAsync.set(true)
        }
    }
}

Unfortunately, the error remains unresolved.

Has anyone encountered this issue with SQLDelight in a KMP project targeting JS? Any suggestions or solutions would be greatly appreciated.

You are using KMP's experimental wasmJs target, which is currently not supported by sqldelight (as of version 2.0.2). wasmJs is one of the two javascript targets that KMP currently supports.

Alternatively to wasmJs, you can use KMP's js target with compose and sqldelight, which is supported by sqldelight and experimentally supported via the CanvasBasedWindow.

Please note that the web worker driver:

• is only compatible with the browser targets (so not in a library)
• the provided SQL.js worker does not provide persistence, it's memory only

To set up a KMP js target with compose and sqldelight, you need to

1. setup the js target in your apps build.gradle.kts:

kotlin {
...
   js {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
            }
        }
        binaries.executable()
        useEsModules()
  }
...
}

2. add the correct dependencies for the driver including the worker to your sourceset, see docs here and here

sourceSets.jsMain.dependencies {
    implementation "app.cash.sqldelight:sqljs-driver:2.0.2"
    implementation npm("sql.js", "1.12.0")
    implementation devNpm("copy-webpack-plugin", "9.1.0")
    implementation(npm("@cashapp/sqldelight-sqljs-worker", "2.0.2"))
  }

3. add the copy webpack for sqljs configuration to your project directory (e.g., composeApp/webpack.config.d/sqljs.js), see documentation

// {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'
        ]
    })
);

4. use the generateAsync flag when creating the database, see documentation

sqldelight {
  databases {
    create("Database") {
      packageName.set("com.example")
      generateAsync.set(true)
    }
  }
}

5. use the async driver for JS, see documentation

actual suspend fun provideDbDriver(
  schema: SqlSchema<QueryResult.AsyncValue<Unit>>
): SqlDriver {
  return WebWorkerDriver(
    Worker(
      js("""new URL("@cashapp/sqldelight-sqljs-worker/sqljs.worker.js", import.meta.url)""")
    )
  ).also { schema.create(it).await() }
}

6. use the experimental CanvasBasedWindow to instantiate the compose app:

// jsMain Main.kt entry point for your App
suspend fun main() {
    onWasmReady {
        CanvasBasedWindow("composeApp") {
            App()
        }
    }
}