Do you have sql.js as a dependency on your pure JS project?

# squarelibraries

[Derek Ellis]

Do you have sql.js as a dependency on your pure JS project?

[xxfast]

yes

"dependencies": {
    ...
    "sql.js": "^1.5.0",
    ...
  },

[Derek Ellis]

Try updating it to 1.6.2

[Derek Ellis]

It has to match the version that the sqljs driver was compiled with

[xxfast]

i see - let me try that out

[xxfast]

hmm getting the same magic handshake error still

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
    at F (sql-wasm.js:106)
    at sql-wasm.js:165

[Derek Ellis]

Ah, you might be hitting a 404 error when trying to load the wasm binary https://github.com/WebAssembly/spec/issues/1031

I'm guessing you don't have those webpack tasks as part of your pure JS project? You just need to copy the wasm file to the output of your pure JS project.

[Derek Ellis]

Unless you're producing a Kotlin/JS executable, you don't actually need those webpack tasks as part of your KMP library module. You only need it as part of your final executable/bundle

[xxfast]

sql-wasm.js:166 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

yeah, i assumed this could be why in the original thread here

[xxfast]

i see

[xxfast]

is there any sample apps that i can look at where this is done one a pure js project?

[Derek Ellis]

This is a similar setup to yours, a KMP module being linked into a plain TypeScript project: https://github.com/cuhacking/atlas/tree/master/web

[xxfast]

awesome - thank you very much 🙏

[xxfast]

it worked! so happy 😄

[xxfast]

btw turns out copy-webpack-plugin required webpack >v5

[xxfast]

ended up using npm i copy-webpack-plugin@6 as mentioned here

[hfhbd]

Can you provide your code? I am stuck too:D

[xxfast]

Well the project i’m working on isn’t open-source. But i’ll share just my webpack configs. I’m using react-app-rewired to override webpack configs from create-react-app

// config-overrides.js
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = function override(config, dev) {
    config.plugins.push(
        new CopyWebpackPlugin({
            patterns: [{from: "./node_modules/sql.js/dist/sql-wasm.wasm"}],
        }),
    )
    return config;
}

[xxfast]

on kotlin side - no additional fancy configs are required (as i’m not directly serving from kotlin, rather packing from kotlin using npm-publish, and serving from js project

val jsMain by getting {
  dependencies {
    implementation(npm(Npm.sqlJs, Npm.Versions.sqlJs))
  }
}

[hfhbd]

Thanks, got it 🙂