How to include an WASM npm module in svelte with vite?

I'm using vite to run a svelte app, and have a WASM package built with wasm-pack --target web. If I use the package directly with vanilla JS, I can write something like:

<script type="module">
    import init, { greet } from "./pkg/compiler.js";

    init().then(() => {
        greet("Hello");
    });
</script>

in an HTML file where greet is one of my wasm_bindgen functions, and that works fine.

However, my intended pipeline is to publish the pkg/ folder that wasm-pack generates to npm, and then use this package in svelte with vite, something like so:

<script lang="ts">
    import init, { greet } from "@ocr-compiler/compiler";
    
    init().then(() => {
        greet("Hello");
    });
</script>

However, this throws an error: Unknown file extension ".wasm" for /home/drbracewell/code/ocr/packages/svelte-editor/node_modules/@ocr-compiler/compiler/compiler_bg.wasm Does anyone know how I can fix this? Vite docs mention that it will automatically process .wasm files, but does this not happen when they're included from npm packages?

Eventually solved this using vite-plugin-wasm-pack, but a couple notes:

• You need to bundle with the --target web flag with wasm-pack.
• If your rust crate exists locally you should just be able to pass path in and the plugin will bundle it correctly.
• If you intend to publish your package to or are using a WASM package from npm, you will need to add a main property to the package.json generated by wasm-pack - There's currently a pull request open to ensure that it will get added regardless of the target, but in the meantime it would be pretty simple to setup a package script that adds it to the JSON.