Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to import and serve wasm.js library in Svelte with the right response headers

$
0
0

Context

I have a Svelte 4 app where

I'm trying to use transcribe.js library: https://github.com/TranscribeJs/transcribe.js?tab=readme-ov-file#webserver, which requires that all response headers include:

"Cross-Origin-Embedder-Policy": "require-corp""Cross-Origin-Opener-Policy": "same-origin"

I current have the entire library hosted in src/lib/transcribe directory because I had issues with importing from node_packages.

I was able to set the right response headers using this plugin: https://github.com/chaosprint/vite-plugin-cross-origin-isolation

vite dev works fine, and everything works locally.

The problem: vite build gives me this error

error during build:[vite-plugin-sveltekit-compile] [vite:worker-import-meta-url] Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.file: src/lib/transcribe/shout/shout.wasm.js

Some things I tried:

I moved the transcribe library to static/transcribe directory. I cannot figure out how to set the response headers for files under static to contain "Cross-Origin-Embedder-Policy": "require-corp", etc. These headers are necessary to get the transcribeJS library to work.

Once this problem is solved, another one that I might run into is how to import this library back in my src/lib/components/MyComponent.svelte file? I currently have import createModule from "$lib/transcribe/shout/shout.wasm.js".


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>