Migrate to Vite instead of Webpack

[fahdfady]

Motivation

The current wasm-rust template uses an outdated Webpack 4 configuration that produces errors when trying to build WebAssembly modules. Specifically, while following the tutorial, the build fails with errors like "Unknown element type in table: 0xNaN" and "Module parse failed: Unknown element type in table". i guess these errors occur because the Webpack configuration doesn't properly handle wasm modules.

Proposed Solution

at this point of web history, I'm very uncertain on why such a popular template use webpack, being this un-reliable, while we got something like Vite js

Alternatives

Migrate the template from Webpack to Vite 6.1.0, which has reliable small-sized plugins to support WebAssembly and requires minimal configuration(this is great because while following a tutorial i don't expect to be worried about config files not working properly). Here's the my configuration i've done to help myself:

// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'

import wasm from "vite-plugin-wasm";
// not needed, but important for supporting older browsers
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
    root: '.',
    build: {
        outDir: 'dist',
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                bootstrap: resolve(__dirname, 'bootstrap.js')
            }
        }
    },
    server: {
        open: 'index.html'
    },
    plugins: [
        wasm(),
        topLevelAwait()
    ]
})

the package.json:

 "dependencies": {
        "wasm-game-of-rust": "file:../pkg"
    },
    "devDependencies": {
        "vite": "6.1.0",
        "vite-plugin-top-level-await": "1.4.4",
        "vite-plugin-wasm": "3.4.1"
    }

However, this can be avoided by:

• Update the existing Webpack configuration with proper WebAssembly loaders and modern configuration. However, this would require more complex configuration and maintenance.
• Keep Webpack but upgrade to Webpack 5 with experimental WebAssembly features enabled. This would still require more configuration than Vite and might break compatibility with some existing code.

Additional Context

Maybe the problem was on my side, this is a part of the logs that came up to me if somebody could help 🙏

ERROR in ../pkg/wasm_game_of_rust_bg.wasm
Module parse failed: Unknown element type in table: 0xNaN
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loadersError: Unknown element type in table: 0xNaN

This change would make the template more maintainable and provide a better developer experience for users learning Rust and WebAssembly.

[kolmodin]

Except for wasm-bindgen, most projects under https://github.com/rustwasm have not been updated in years. From looking around, it seems that many projects stopped around 2019.

Are there still ppl around to decide on a new WebAssembly loader and accept PRs?

[parrotmac]

@fahdfady This was exactly what I was hoping for. I've put up a repo here for anyone else wanting a working starting point.