search

Stranger6667 / css-inline

High-performance library for inlining CSS into HTML 'style' attributes
https://css-inline.org/
MIT License
232 stars 29 forks source link

JavaScript WASM broken Since 0.13.0 #341

Closed harlan-zw closed 4 months ago

harlan-zw commented 5 months ago

Hey, had some time today to debug this a bit further. It seems like since 0.13.0 an error is thrown while trying to initialise the WASM.

LinkError: WebAssembly.instantiate(): Import #6 module="wbg" function="__wbg_getwithrefkey_edc2c8960f0f1191": function import requires a callable
    at WebAssembly.instantiate (https://stackblitzstartersqqx12u-3uqb.w-credentialless-staticblitz.com/blitz.810981ba.js:352:612744)
    at __wbg_load (file:///home/projects/stackblitz-starters-qqx12u/dist/index.mjs:214:40)
    at __wbg_init (file:///home/projects/stackblitz-starters-qqx12u/dist/index.mjs:357:38)
    at async initWasm (file:///home/projects/stackblitz-starters-qqx12u/dist/index.mjs:370:3)
    at async inlineCss (file:///home/projects/stackblitz-starters-qqx12u/dist/index.mjs:385:3)

Broken 0.13.1: https://stackblitz.com/edit/stackblitz-starters-qqx12u?file=package.json Working 0.12.1: https://stackblitz.com/edit/stackblitz-starters-fmque5?file=package.json

I don't know what the issue could mean but this is what GitHub Copilot said, if it helps:

The error message you're seeing is related to WebAssembly. It's saying that a function import requires a callable, which means that the WebAssembly module is trying to import a function that should be provided by the JavaScript environment, but it's not finding it. In your case, the function __wbg_getwithrefkey_edc2c8960f0f1191 is missing. This function is likely a part of the glue code that is generated by the tool you're using to compile your code to WebAssembly (possibly wasm-bindgen or emscripten).

Stranger6667 commented 4 months ago

It is indeed strange as the current .mjs file contains __wbg_getwithrefkey_4a92a5eca60879b9 (different suffix), and this suffix is the same as it was in 0.12.1. Probably the file was re-generated during the release build or it has a different suffix in some glue code (indeed as suggested) which does not properly map to the actual function name. I'll check it in more detail, probably some issue during the build step

Stranger6667 commented 4 months ago

Posting an update here. The published WASM module has the following import:

(import "wbg" "__wbg_getwithrefkey_edc2c8960f0f1191" (func (;6;) (type 1)))

However, the published JS wrapper refers to:

imports.wbg.__wbg_getwithrefkey_4a92a5eca60879b9

I think the issue is this - the build process creates a wasm file and moves it from wasm/dist to wasm. The wasm directory already has some JS wrapper, which may be outdated.

To fix this I'll update the build process, so the JS wrapper that is getting published is regenerated as well

Stranger6667 commented 4 months ago

Works!

https://stackblitz.com/edit/stackblitz-starters-ke7797?file=package.json