cross-fetch does not work in service workers of webextensions bundled with Vite

[pate313373]

Hi!

I'm using tsdav, which itself depends on cross-fetch in a service worker of a webextension, which is bundled with Vite. However, it seems that when the service worker is being bundled, cross-fetch does not work well.

An outputs the following error: TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Illegal invocation

Many thanks!

package.json

{
  "name": "vite-web-extension",
  "version": "1.0.0",
  "displayName": "Vite Web Extension",
  "author": "@samrum/vite-plugin-web-extension",
  "description": "A @samrum/vite-plugin-web-extension web extension",
  "type": "module",
  "scripts": {
    "build": "vite build",
    "watch": "vite build --watch --mode development --minify false",
    "dev": "vite",
    "serve:firefox": "web-ext run --start-url \"about:debugging#/runtime/this-firefox\"  --source-dir ./dist/",
    "serve:chrome": "web-ext run -t chromium --start-url \"https://example.com\" --source-dir ./dist/",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "license": "MIT",
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@samrum/vite-plugin-web-extension": "^5.1.0",
    "@types/chrome": "^0.0.254",
    "@types/webextension-polyfill": "^0.10.6",
    "@vitejs/plugin-vue2": "^1.1.2",
    "@vue/eslint-config-prettier": "^8.0.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.20.1",
    "prettier": "^3.0.3",
    "vite": "^5.0.10",
    "web-ext": "^7.8.0"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "gmap-vue": "^3.5.4",
    "ics": "^3.5.0",
    "leaflet": "^1.9.4",
    "lodash": "^4.17.21",
    "luxon": "^3.4.4",
    "pinia": "^2.0.16",
    "tsdav": "^2.0.5",
    "vue": "^2.7.7",
    "vue2-leaflet": "^2.7.1",
    "vuetify": "^2.7.1",
    "webextension-polyfill": "^0.10.0"
  },
  "overrides": {
    "tsdav": {
      "cross-fetch": "^4.0.0"
    }
  }
}

vite.config

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import webExtension from '@samrum/vite-plugin-web-extension';
import path from 'path';
import { getManifest } from './src/manifest';

// https://vitejs.dev/config/
export default defineConfig(() => {
	return {
		plugins: [
			vue({}),
			webExtension({
				manifest: getManifest(),
			}),
		],
		resolve: {
			alias: {
				'@': path.resolve(__dirname, './src'),
			},
		},
	};
});

background-script

import browser from 'webextension-polyfill'; import { DAVClient } from 'tsdav'; import { createEvent } from 'ics'; import _ from 'lodash'; // import { DateTime } from "luxon";

console.log('Background Script');

browser.runtime.onMessage.addListener(async (msg, sender) => {
	const operation = _.get(msg, 'operation');
	if (operation !== 'loadEvents') {
		console.log('message is not for me');
		return;
	}
	// chrome.tabs.create({ url: chrome.runtime.getURL("/pages/help.html") });
	try {
		const calDavClient = new DAVClient({
			serverUrl: 'https://caldav.icloud.com',
			credentials: { username: '[email protected]', password: 'pass111' },
			authMethod: 'Basic',
			defaultAccountType: 'caldav',
		});
		return await calDavClient.login();
	} catch (error) {
		console.error(error);
	}
});