Error when importing on vite

[Niedzwiedzw]

it's this code that creates that error

import blackspotjs from 'blackspotjs';
// ..
const b = await blackspotjs();

this package was built with latest wasm-pack with --target web option.

[Niedzwiedzw]

rustwasm/wasm-bindgen#2779 cross-posting the issue partially solved but still in progress on wasm-bindgen repo

[stefnotch]

I did some more digging while attempting to import brotli-wasm. It might be interesting
httptoolkit/brotli-wasm#8 (comment)

[hazelmeow]

For me, Vite was showing the error: The request url "[...]/my-crate/pkg/my_crate_bg.wasm" is outside of Vite serving allow list.

I fixed it by importing my_crate_bg.wasm as a static asset and then passing the URL of it to init.

package.json:

{
  "dependencies": {
    "my-crate": "link:../my-crate/pkg"
  }
}

JS:

import init, { ... } from "my-crate";
import wasmUrl from "my-crate/my_crate_bg.wasm?url";

init(wasmUrl).then(() => { ... });

Seemed to work with either vite-plugin-wasm or vite-plugin-wasm-pack.

[ntninja]

@hazelmeow: Thanks for this! Seems like a very clean way to make wasm-pack’s web target interop with Vite using Vite’s native capabilities.

The recommended way nowadays appears to be to use the default wasm-pack build --target bundler mode and then add the vite-plugin-wasm and vite-plugin-top-level-await plugins to Vite support loading the resulting bundle however.

To change existing code to this approach, the following steps are needed:

1. Add the extra dependencies:
   npm add --save-dev vite-plugin-wasm vite-plugin-top-level-await
2. Add the plugins to vite.config.js:

   import wasm from "vite-plugin-wasm";
   import topLevelAwait from "vite-plugin-top-level-await";
   
   export default defineConfig({
     // …
     plugins: [
       wasm(),
       topLevelAwait(),
       // …
     ],
     // …
   };

3. Update the import code to only import the needed values as init will now be run automatically:

   import { … } from "my-crate";  // or: import * as wasm from "my-crate";
   
   // Code that was inside init(wasmUrl).then(() => { … })