[BUG] library not being recognized/provided by vite

[RhuanPrado]

Describe the bug

I created react project with vite typescript.
My problem's is using the library @undecaf/zbar-wasm.

BarcodeScanner.jsx

import { scanImageData } from "@undecaf/zbar-wasm"

const scanBarcode = useCallback(async () => {

                const context = canvasRef.current.getContext("2d")
		context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height)
		const imageData = context.getImageData(0, 0, canvasRef.current.width, canvasRef.current.height)
		try {

			const symbols = await scanImageData(imageData)
			if (symbols.length > 0) {
				const barcode = symbols[0].decode()
				const quality = symbols[0].quality
				updateScannedBarcodes(barcode, quality)
			}
		} catch (err) {
			console.error("Error scanning image data:", err)
		}
	}, [updateScannedBarcodes, isScanning])
[...]

My vite.config.ts

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"

export default defineConfig({
	plugins: [
		react(),
	],
	resolve: {
		alias: {
			src: path.resolve(__dirname, "src"),
		},
	},
	server: {
		port: 3000,
	},
	assetsInclude: ['**/*.wasm'],
});

Errors

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ @undecaf_zbar-wasm.js?v=fd05e335:210
Promise.then (async)

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Error scanning image data: RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info.
    at P (@undecaf_zbar-wasm.js?v=fd05e335:70:14)
    at @undecaf_zbar-wasm.js?v=fd05e335:103:59

In my investigation I learned that vite does not provide .wasm .

My solution for the problem, which is not the preferred:

import { scanImageData, setModuleArgs } from "@undecaf/zbar-wasm"

setModuleArgs({
	locateFile: (filename) => `https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/${filename}`
})

The .wasm is provided this way, but not through the library loader :

[undecaf]

This message:

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

indicates that Vite is not loading a WASM file but an HTML file (possibly a 404 page). This situation is discussed in detail in this issue.

Edit: Unfortunately I cannot give advice on how to configure Vite as I am not familiar with this environment, but this SO answer may be helpful; it solved a similar issue for SQL.js.

In any case, this is not a bug of zbar-wasm.

[RhuanPrado]

I wanted to know if I was doing something wrong, thank you for replying and also alerting me to the problem I've experienced and registering it for others.

wasm-based library not being recognized/provided by vite #17334

#8427

[RhuanPrado]

Another way to solve this problem is to add it to vite.config.ts:

export default defineConfig({
	// others configs ...
	
	optimizeDeps:{
		exclude:["@undecaf/zbar-wasm"]
	}// add this config
});

Solution