diff --git a/index.html b/index.html
index 4257b37294..f58971b95e 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,7 @@
 	<strong>We're sorry but Vikunja doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
-<!-- TODO_OFFLINE maybe need to dynamically import it instead.
-Not sure if it works ok inside Delta Chat. -->
-<script type="module" src="/webxdc.js"></script>
+<!--WEBXDC_SCRIPT_PLACEHOLDER-->
 <script type="module" src="/src/main.ts"></script>
 <script>
     //
diff --git a/vite.config.ts b/vite.config.ts
index 06f0dd1852..b7723d3647 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -34,6 +34,22 @@ console.log(isModernBuild
 	: 'Building "legacy" build with "@vitejs/plugin-legacy"',
 )
 
+// Very hacky. Why not incldue it right there in `index.html`? Because otherwise
+// would try to resolve `webxdc.js` and transform it.
+// TODO_OFFLINE refactor: don't include it in non-webxdc build because it's always a 404.
+const injectWebxdcIntoIndexHtmlPlugin = () => {
+  return {
+    name: 'inject-webxdc-into-index-html',
+		enforce: 'post',
+    transformIndexHtml(html) {
+      return html.replace(
+				'<!--WEBXDC_SCRIPT_PLACEHOLDER-->',
+				'<script type="module" src="/webxdc.js"></script>'
+      )
+    },
+  }
+}
+
 /**
  * @param fontNames Array of the file names of the fonts without axis and hash suffixes
  */
@@ -87,6 +103,7 @@ export default defineConfig(({mode}) => {
 			},
 		},
 		plugins: [
+			injectWebxdcIntoIndexHtmlPlugin(),
 			vue({
 				reactivityTransform: true,
 			}),
@@ -187,9 +204,6 @@ export default defineConfig(({mode}) => {
 		build: {
 			target: 'esnext',
 			rollupOptions: {
-				external: [
-					"/webxdc.js"
-				],
 				plugins: [
 					visualizer({
 						filename: 'stats.html',