https://kotlinlang.org logo
d

Derek Ellis

01/14/2022, 2:07 AM
Do you have sql.js as a dependency on your pure JS project?
x

xxfast

01/14/2022, 2:08 AM
yes
Copy code
"dependencies": {
    ...
    "sql.js": "^1.5.0",
    ...
  },
d

Derek Ellis

01/14/2022, 2:09 AM
Try updating it to 1.6.2
It has to match the version that the sqljs driver was compiled with
x

xxfast

01/14/2022, 2:13 AM
i see - let me try that out
hmm getting the same magic handshake error still
Copy code
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
d

Derek Ellis

01/14/2022, 2:22 AM
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.
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
x

xxfast

01/14/2022, 2:23 AM
Copy code
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
i see
is there any sample apps that i can look at where this is done one a pure js project?
d

Derek Ellis

01/14/2022, 2:25 AM
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
🙌 1
x

xxfast

01/14/2022, 2:26 AM
awesome - thank you very much 🙏
👍 1
it worked! so happy 😄
K 1
btw turns out
copy-webpack-plugin
required webpack >v5
ended up using
npm i copy-webpack-plugin@6
as mentioned here
h

hfhbd

01/15/2022, 3:31 PM
Can you provide your code? I am stuck too:D
x

xxfast

01/16/2022, 10:31 PM
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
Copy code
// 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;
}
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
Copy code
val jsMain by getting {
  dependencies {
    implementation(npm(Npm.sqlJs, Npm.Versions.sqlJs))
  }
}
h

hfhbd

01/17/2022, 12:24 AM
Thanks, got it 🙂
67 Views