WASM Web Workers + Adapter Vercel?

[keltonhalbert]

Hello,

I am trying to deploy a SvelteKit page that uses a WASM application compiled with Emscripten. This WASM application uses PThreads/Web Workers. I have successfully built a page that works in development mode, but when running the build step (both locally and on Vercel), I get the following error:

[vite-plugin-sveltekit-compile] [vite:worker-import-meta-url] Module format "iife" does no
t support top-level await. Use the "es" or "system" output formats rather.
file: /home/kthalbert/CODEBASE/stormscale-io/src/routes/(spc)/spc/NFDRS4/NFDRS.js
file: /home/kthalbert/CODEBASE/stormscale-io/src/routes/(spc)/spc/NFDRS4/NFDRS.js
[vite:worker-import-meta-url] Module format "iife" does not support top-level await. Use t
he "es" or "system" output formats rather.
file: /home/kthalbert/CODEBASE/stormscale-io/src/routes/(spc)/spc/NFDRS4/NFDRS.js
    at getRollupError (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/d
ist/es/shared/parseAst.js:397:41)
    at error (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/dist/es/sh
ared/parseAst.js:393:42)
    at Module.render (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/di
st/es/shared/node-entry.js:16972:20)
    at Chunk.renderModules (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rol
lup/dist/es/shared/node-entry.js:18724:41)
    at Chunk.render (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/dis
t/es/shared/node-entry.js:18206:111)
    at file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/dist/es/shared/no
de-entry.js:19901:72
    at Array.map (<anonymous>)
    at renderChunks (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/dis
t/es/shared/node-entry.js:19901:53)
    at Bundle.generate (file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/
dist/es/shared/node-entry.js:20164:19)
    at async file:///home/kthalbert/CODEBASE/stormscale-io/node_modules/rollup/dist/es/sha
red/node-entry.js:22878:27
error: script "build" exited with code 1

My +page.svelte is fairly simple:

<script lang="ts">
	import { onMount } from 'svelte';
	import createModule from './NFDRS.js';

	onMount(() => {
		var Module = {
			preRun: [],
			postRun: [],
			print: (function () {
				return function (text) {
					text = Array.prototype.slice.call(arguments).join(' ');
					console.log(text);
				};
			})(),
			printErr: function (text) {
				text = Array.prototype.slice.call(arguments).join(' ');
				console.error(text);
			},
			canvas: (function () {
				var canvas = document.getElementById('canvas');
				//canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
				return canvas;
			})(),
			setStatus: function (text) {
				console.log('status: ' + text);
			},
			monitorRunDependencies: function (left) {
				// no run dependencies to log
			}
		};
		window.onerror = function () {
			console.log('onerror: ' + event);
		};
		createModule(Module)
			.then((instance) => {
				console.log('WASM Module loaded', instance);
			})
			.catch((err) => {
				console.error('Failed to load module:', err);
			});
	});
</script>

<canvas
	class="emscripten h-screen w-screen"
	id="canvas"
	oncontextmenu={(ev) => {
		ev.preventDefault();
	}}
></canvas>

<style>
	/* FIXME: with our GLFW example this block seems to break resizing and io.DisplaySize gets stuck */
	.emscripten {
		position: absolute;
		top: 0px;
		left: 0px;
		margin: 0px;
		border: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: block;
		image-rendering: optimizeSpeed;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
		image-rendering: crisp-edges;
		image-rendering: pixelated;
		-ms-interpolation-mode: nearest-neighbor;
	}
</style>

Any ideas on what I am doing wrong? I am suspecting it has something to do with code being executed on the client side that shouldn't be, but I also am not sure how this should be structured to make it work. I would appreciate any guidance and assistance that could be provided!

[keltonhalbert]

Well, I feel like a bit of a dummy, but leaving this here for anyone else who tries something like this.

You need to compile your WASM with the following Emscripten compiler option: -sENVIRONMENT=web,worker