From eb8db733a6595ea15c8ef676b00f234b54575f2b Mon Sep 17 00:00:00 2001 From: "Timo K." Date: Fri, 18 Sep 2026 14:58:57 +0200 Subject: [PATCH] fix wasm loading in component build --- src/matrix-rtc-sdk/index.ts | 9 ++++++++- vite-component.config.ts | 5 +++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/matrix-rtc-sdk/index.ts b/src/matrix-rtc-sdk/index.ts index 92d924197..04334d66a 100644 --- a/src/matrix-rtc-sdk/index.ts +++ b/src/matrix-rtc-sdk/index.ts @@ -98,8 +98,15 @@ export async function initMatrixRtcSdk( * until needed. Asked for explicitly, rather than leaving the package to its * `import.meta.url` default, so that the dev server's dependency * pre-bundling, which rewrites module URLs, cannot lose track of it. + * + * `no-inline` because the library build would otherwise embed the wasm as a + * base64 `data:` URL: a megabyte in the JavaScript, and one a host's Content + * Security Policy may well refuse to `fetch` (Element Web's does). As a file + * next to the bundle, referenced through `import.meta.url`, the host's own + * bundler copies it along with everything else. */ async function bundledWasm(): Promise { - const { default: url } = await import("@element-hq/matrix-rtc/wasm?url"); + const { default: url } = + await import("@element-hq/matrix-rtc/wasm?url&no-inline"); return url; } diff --git a/vite-component.config.ts b/vite-component.config.ts index ae0ac1508..1624c7ebd 100644 --- a/vite-component.config.ts +++ b/vite-component.config.ts @@ -37,6 +37,11 @@ export default defineConfig(({ mode }) => { // A host's document is not ours to style: everything in the stylesheet is // confined to the element Element Call is mounted in css: { postcss: { plugins: [scopeStylesToRoot()] } }, + // A library does not know where its host will serve it from, so the few + // assets that are not inlined (the MatrixRTC wasm) are addressed relative + // to the bundle, through `import.meta.url`, which a host's bundler follows. + // With the default `/` they would be absolute paths on the host's origin. + base: "./", build: { // Into the package directory, so that `component/package.json` describes // what sits next to it and the directory can be installed as a package