JS error at index.ts 36:8 browser-ponyfill.js

[hmingv]

Environment

• Operating System: Windows_NT
• Node Version: v20.1.0
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.9.3
• Package Manager: pnpm@8.14.2
• Builder: -
• User Config: vite, routeRules, typescript, modules, image, runtimeConfig, app, postcss, components, css, nitro
• Runtime Modules: nuxt-graphql-client@0.2.33, @nuxt/image@1.4.0, @nuxtjs/tailwindcss@6.11.4
• Build Modules: -

Describe the bug

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/cross-fetch@3.1.8/node_modules/cross-fetch/dist/browser-ponyfill.js?v=368afc8d' does not provide an export named 'default' (at index.ts:36:8)

Expected behaviour

No errors

Reproduction

No response

Additional context

No response

Logs

No response

[jonathanwilke]

Having the same issue.

[giacomocerquone]

it's almost identical to https://github.com/Diizzayy/nuxt-graphql-client/issues/68 since I have the very same problem with pnpm but not with yarn

@Diizzayy do you have any idea?

[Isengo1989]

Same here

[m0nch1]

I'm not sure, but specifying shamefully-hoist=true in .npmrc might help.

The sample at https://nuxt-graphql-client.web.app/getting-started/quick-start#preview is working with pnpm and specifies these options.

ref: https://stackblitz.com/edit/nuxt-graphql?file=.npmrc

cc: @Diizzayy

[manniL]

specifying shamefully-hoist=true in .npmrc might help

That solves the issue. Might need to add explicit deps.

[iegik]

As I know, Nuxt and Next are the both client and server hybrid solutions and cross-fetch supposed to be a replacement (ponyfill) for a fetch. But, it isn't. Because Ponyfills are new, separate functions that are used to replace native ones, and Polyfills are add functionality, that not existed in the environment.

So, cross-fetch not only replaces the existed functionality, but also breaks types, expected behavior and add unexpected dependency.

As a solution - replace cross-fetch with dummy empty package as mentioned here: https://github.com/lquixada/cross-fetch/issues/177#issuecomment-2172981911

Example:

  "overrides": {
    "cross-fetch": {
      "import": "src/overrides/dummy.js"
    }
  }

// src/overrides/dummy.js
import 'esm';

export {}; // Empty export to prevent default behavior

[KillerJulian]

specifying shamefully-hoist=true in .npmrc might help

Original message

  "overrides": {
    "cross-fetch": {
      "import": "src/overrides/dummy.js"
    }
  }

// src/overrides/dummy.js
import 'esm';

export {}; // Empty export to prevent default behavior

Original message

Neither approach helped me with pnpm.

[KillerJulian]

Workaround

The following solution from Pull Request #498 solved the problem for me. Add the following to the ~/nuxt.config.ts:

export default defineNuxtConfig({
    // ...
    vite: {
        optimizeDeps: {
            include: [
                'nuxt-graphql-client > graphql-request' // Workaround for: https://github.com/Diizzayy/nuxt-graphql-client/issues/473
            ]
        }
    }
});