are these usable somehow with vite?

[hitchhooker]

i managed to use this rollup plugin with svelte, but sveltekit has changed rollup to vite as build tool. is there wasm-tool/plugin for Vite existing?

[Pauan]

I haven't tried it with Vite, but if Vite is compatible with Rollup plugins then it might work.

This plugin uses standard Rollup plugin APIs, it doesn't do anything too crazy.

[hitchhooker]

didnt know that rollup plugins can be compatible. i tried to setup rollup-plugin-rust with sveltekit but facing following error(https://github.com/hitchhooker/sveltekit-rust/issues/1) about keyword package being reserved. I can't think of package being used anywhere tho. tried adapting while following this setup. https://blog.logrocket.com/integrating-svelte-app-rust-webassembly/

[DougAnderson444]

vite dev does not work, but vite build does work. Not ideal, but at least we know it's limited to the dev command.

I also tried a few tricks to exclude the Cargo.toml dependency, but nothing I tried worked (yet)

[Pauan]

@DougAnderson444 Strange, Vite claims that it can run Rollup plugins in both dev and build mode. What error are you getting?

[DougAnderson444]

@DougAnderson444 Strange, Vite claims that it can run Rollup plugins in both dev and build mode. What error are you getting?

Error I get is package is a reserved word, same error as https://github.com/hitchhooker/sveltekit-rust/issues/1

It's almost as if Vite tries to prebundle or preoptimize the plugin during dev mode, but properly bundles during build mode.

I'm pretty sure this is more of a Vite issue, but it could be that the Rollup plugin isn't configured to be excluded during dev mode?

[Pauan]

I'm pretty sure this is more of a Vite issue, but it could be that the Rollup plugin isn't configured to be excluded during dev mode?

There is no such thing as dev mode in Rollup, that's a Vite-specific thing. And even if there was a dev mode, you wouldn't want to exclude the plugin, because then you wouldn't be able to use dev mode at all.

What seems to be happening is that Vite is just not running the rollup-plugin-rust plugin during dev mode.

[madkarlsson]

I ran into the same issue and did a quick look around.

It seems like a difference that might be causing the issue is here:

// index.js, line 592
            if (info && info.meta) {
                const meta = info.meta["rollup-plugin-rust"];

                if (meta) {

I don't get any meta with ID "rollup-plugin-rust" when running in dev mode so it never triggers the rest of the build process. No idea why, not familiar enough with rollup/vites plugin system. But I do know that sveltekit alters the vite config so it might be related to that.

[Pauan]

@madkarlsson So I've played around with Vite and SvelteKit, and they have a lot of incompatibilities with Rollup:

1. SSR really screws up things a lot.
2. Right now Vite gives an error when trying to load a Wasm file.
3. Vite doesn't allow plugins to modify the plugins array (even though Rollup does allow it).
4. The Vite dev server loads files in a really weird way, so it doesn't work properly with serverPath.

[Pauan]

After doing some more experimentation, it seems that Vite just doesn't run the resolveId hook, which is really bad, since a lot of Rollup plugins rely on that. So that's just a major bug with Vite.

[Pauan]

I filed a bug with Vite about resolveId not working: https://github.com/vitejs/vite/issues/13111

[Pauan]

So I found another incompatibility with Vite: emitFile doesn't work in dev mode.

That seems like a huge limitation, since emitFile is used by a lot of plugins to create static assets.

Note that emitFile does work fine with rollup-plugin-serve, so there is no reason for why Vite can't support it.

But it seems Vite has chosen to just not support emitFile for some reason, even though it works perfectly fine in Rollup... https://github.com/vitejs/vite/issues/7029

So it seems Rollup compatibility is just not important to the Vite devs. So there isn't anything I can do to fix that.

[madkarlsson]

Nice findings @Pauan; thank you. It's only a minor hiccup on my side, as I was putting together a proof of concept, but a bit of a bummer in the long run, as this plugin is a very nice way to integrate wasm.

I managed to get around this by manually building with wasm-pack and `vite-plugin-wasm and can script the build process later on.

See that they are not necessarily getting it in https://github.com/vitejs/vite/issues/13111 , I did try out enforce and a few other things this morning just for the dumb sake of it, but to no avail. Let me know if I can assist (although I said my knowledge in rollup/vite plugins is not that great).

[Pauan]

@madkarlsson I wonder how vite-plugin-wasm handles things... In test mode it seems to just inline the Wasm as bas64, but I have no idea what it's doing when not in test mode.

So I think something like this should get rollup-plugin-rust working with Vite in both build and dev mode:

import { defineConfig } from "vite";
import rust from "@wasm-tool/rollup-plugin-rust";

export default defineConfig(({ command, mode, ssrBuild }) => {
    return {
        plugins: [
            {
                ...rust({
                    inlineWasm: command !== "build"
                }),
                enforce: "pre",
            }
        ]
    };
});

[Pauan]

Also, you need to import the crate using dynamic import() so that way you avoid SSR:

async function loadWasm() {
    if (!import.meta.env.SSR) {
        const wasm = await import("../crate/Cargo.toml");
        const exports = await wasm.default();
        console.log(exports);
    }
}

loadWasm();

[Pauan]

I published a new version 2.4.0 which adds in some Vite-specific hooks so that way rollup-plugin-rust works out of the box with Vite.

That means you don't need to do anything special, everything just works in both build and dev mode:

import { defineConfig } from "vite";
import rust from "@wasm-tool/rollup-plugin-rust";

export default defineConfig({
    plugins: [
        rust(),
    ]
});

And loading the Wasm is also cleaner:

import wasm from "./path/to/Cargo.toml";

async function loadWasm() {
    if (!import.meta.env.SSR) {
        // This code will only run in the browser
        const exports = await wasm();

        // Use functions which were exported from Rust...
    }
}

loadWasm();

[DougAnderson444]

Thank you so much @Pauan for makign this work with vite, I just tried it and it works great in dev mode!