Notes for getting wasm-pack and vite working well together

wasm-pack-with-vite.md

• I'm only interested in using the output of wasm-pack after it has been deployed to npm (or used locally as an npm dep).
• I ended up using vite-plugin-wasm-pack, I also tried vite-plugin-wasm but ran into issues.
• Make sure you build your wasm-pack project with wasm-pack build --target web
• Make sure that all the names used to build and deploy your project are the same (at first I was building x-wasm and then naming the npm dep x switching to x-wasm worked).
• In the package.json for the generated wasm-pack output you'll need to add "type": "module" and "main": x_wasm.js.
  • 📝 TODO I need to look into how to do this automatically.
• In vite.config.js add the following plugin wasmPack([], ['x-wasm'])
• Below are two examples of using wasm code from js

Regular js

import init, {greet} from 'x-wasm';
   
init().then((instance) => {
    console.log(instance.exports.greet());
});

Svelte

import init, {greet} from 'x-wasm';

onMount(async () => {
    await init().then(() => console.log("loaded" + greet()));
});