Export named 'default' is not provided

[lukaszflorczak]

Hey.

I'm trying to use supabase (which uses cross-fetch) with Nuxt 3 and I found a problem with browser-ponyfill:

Uncaught SyntaxError: The requested module '/node_modules/cross-fetch/dist/browser-ponyfill.js?v=6f3da668' does not provide an export named 'default'

More info about ES modules in Nuxt 3: https://v3.nuxtjs.org/concepts/esm

[eMeRiKa13]

I have exactly the same problem since I updated my dependencies some days ago.

What can we do to fix that?

[eMeRiKa13]

On the Nuxt3 Discord server someone game me the solution:

In nuxt.config.ts

build: {
  transpile: ['@supabase', 'cross-fetch']
}

But now I have this error https://github.com/lquixada/cross-fetch/issues/108. I think this lib is not compatible with Vite due to the deprecation of require for import.

[lukaszflorczak]

Temporary, I tried to use patch-package and patch like that:

diff --git a/node_modules/cross-fetch/dist/browser-ponyfill.js b/node_modules/cross-fetch/dist/browser-ponyfill.js
index f26eb09..a89e834 100644
--- a/node_modules/cross-fetch/dist/browser-ponyfill.js
+++ b/node_modules/cross-fetch/dist/browser-ponyfill.js
@@ -545,10 +545,12 @@ delete __self__.fetch.polyfill;
 // Choose between native implementation (global) or custom implementation (__self__)
 // var ctx = global.fetch ? global : __self__;
 var ctx = __self__; // this line disable service worker support temporarily
-exports = ctx.fetch // To enable: import fetch from 'cross-fetch'
-exports.default = ctx.fetch // For TypeScript consumers without esModuleInterop.
-exports.fetch = ctx.fetch // To enable: import {fetch} from 'cross-fetch'
-exports.Headers = ctx.Headers
-exports.Request = ctx.Request
-exports.Response = ctx.Response
-module.exports = exports
+// exports = ctx.fetch // To enable: import fetch from 'cross-fetch'
+// exports.default = ctx.fetch // For TypeScript consumers without esModuleInterop.
+// exports.fetch = ctx.fetch // To enable: import {fetch} from 'cross-fetch'
+// exports.Headers = ctx.Headers
+// exports.Request = ctx.Request
+// exports.Response = ctx.Response
+// module.exports = exports
+
+export default ctx
\ No newline at end of file

In transpile I have only '@supabase'.

---

EDIT: @eMeRiKa13 Finally I used nuxt3-supabase. In nuxt.config.ts I added:

// ...
import { fetch } from 'ohmyfetch'

export default defineNuxtConfig({
  // ...
  supabase: {
    supabaseUrl: process.env.SUPABASE_URL,
    supabaseKey: process.env.SUPABASE_KEY,
    supabaseOptions: { fetch }
  }
)}

The first usage example from nuxt3-supabase documentation doesn't work for me ($supabase is undefined), but it looks the composable method works fine.

[eMeRiKa13]

Thank for your answer. At the end, I have just removed both transpile and it's now working transpile : ['@supabase', 'cross-fetch']

For the Supabase integration, I'm using what Atinux, the Nuxt's creator, showcased here https://github.com/nuxt/framework/pull/2058

[lukaszflorczak]

Nice, thank you for that. I'll test it.

---

@lquixada Sorry for the offtopic

[Mo0nbase]

I've just discovered the same issue however this time with the Qwik framework. Any ideas on how to triage this?

PostgrestBuilder.ts:1 Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/cross-fetch@3.1.8/node_modules/cross-fetch/dist/browser-ponyfill.js?v=c3dac3ef' does not provide an export named 'default' (at PostgrestBuilder.ts:1:8)