How to use with vite?

[cugarteblair]

I would like to use parquet-wasm in my vite project but have been unable to initialize. Here is how I am trying to initialize, also I added the vite-plugin-wasm in my vite.config.ts. I get this error(Note I get the same thing with the await pattern):

Error initializing WebAssembly module: TypeError: WebAssembly.instantiate(): Import #0 "./parquet_wasm_bg.js": module is not an object or function

// Here is how I try to initialize

import wasmInit, { readParquet } from "parquet-wasm";

// Provide the correct URL for the WebAssembly file
const wasmUrl = new URL('../../node_modules/parquet-wasm/bundler/parquet_wasm_bg.wasm', import.meta.url).href;

// Initialize the WebAssembly module with the provided URL
wasmInit(wasmUrl).then(() => {
console.log("WebAssembly module initialized successfully");
}).catch((error) => {
console.error("Error initializing WebAssembly module:", error);
});

[kylebarron]

You should inspect the traceback inside the generated parquet_wasm_bg.js, and perhaps put a breakpoint in the WebAssembly.instantiate call. Presumably the way you're passing in a local URL isn't supported by that WebAssembly.instantiate constructor.

[mgd722]

No idea what the long term implications of this are, but adding the wasm plugin and excluding this package from optimization in my vite.config.js got me rolling. Sample vite.config.js:

import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';

export default defineConfig({
    plugins: [wasm()],
    optimizeDeps: {
        exclude: [
            "parquet-wasm"
        ]
    },
    // ... the rest of your config
}

[H-Plus-Time]

sans-'vite-plugin-wasm', that import error crops up if the imported JS module and the wasm blob url aren't aligned.

You want 'parquet-wasm/esm/parquet_wasm_bg.wasm' (since vite chooses the 'esm/parquet_wasm.js' module for unsuffixed imports), rather than the bundler one.

On the maintainer side - this, added to the exports section of a wasm-packed JS library (that does the triple-build thing we do here), would be reasonable:

"./wasm": {
  "node": "./node/parquet_wasm_bg.wasm",
  "default": "./esm/parquet_wasm_bg.wasm"
}

with consuming code doing:

import wasmInit, {readParquet} from "parquet-wasm";
const wasmUrl = new URL("parquet-wasm/wasm", import.meta.url);
// alternatively, import wasmUrl from "parquet-wasm/wasm?url";
await wasmInit(wasmUrl);

It can still be misused of course (e.g. require('parquet-wasm/wasm') will absolutely throw, though require('parquet-wasm/node/parquet_wasm_bg.wasm') is already permitted and would also throw).

[kylebarron]

On the maintainer side - this, added to the exports section of a wasm-packed JS library (that does the triple-build thing we do here), would be reasonable:

I'd be happy to see a PR implementing this. I haven't implemented it myself only because I don't use all the different build tools to import parquet-wasm

[jorgen]

Hey guys. I am able to load the bundle code in a worker using webpack, but this failes in vite. I'm getting a "Uncaught ReferenceError: window is not defined"

[kylebarron]

You want to use the esm entry point with vite, not the bundler entry point