TypeError: `fetch` is not a function with `electron-vite`

[ylkhayat]

Hello people,

First of all, huge thankyou for the maintainers of this package. We rely on it for our main process networking.

Background

Recently we were trying to integrate electron-vite to boost our application a little, thus we were moving away from our react-app-rewired setup in which electron-fetch was working properly.

Issue

The following piece of code was not executing as it should.

import fetch from "electron-fetch";

fetch(/* something */) // ❌ not working as expected

It was triggering the following runtime error

TypeError: 'fetch' is not a function

Solution

However, it seems that this is because of the default export from the package needs to be manually put for things to work properly. So the following approach works properly:

import fetchExport from "electron-fetch";
const fetch = fetchExport.default // gives typescript error 
fetch(/* something */) // ✅ works as expected

but still triggers some (silence-able) typescript errors.

Property 'default' does not exist on type '(url: RequestInfo, options?: RequestInit) => Promise<Response>'.ts(2339)

Potential Issue

It's important to mention that our project's tsconfig has these two properties set:

{
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
}

and I think that the problem might be related to this file https://github.com/arantes555/electron-fetch/blob/master/build/rollup-plugin.js

Would be happy to offer any other insights I have about this problem.