use $fetch in SSR leading to "Headers is not a function"

See original GitHub issue

I found that today after upgrade Nuxt3 to lastest, when use $fetch within SSR leading to error:

TypeError: Headers is not a constructor
    at $fetchRaw2 (file:///workspace/node_modules/ohmyfetch/dist/chunks/fetch.mjs:122:33)
    at $fetch2 (file:///workspace/node_modules/ohmyfetch/dist/chunks/fetch.mjs:158:12)
    at file:///workspace/.nuxt/dist/server/server.mjs:58925:25
    at Object.asyncData.refresh (file:///workspace/.nuxt/dist/server/server.mjs:950:52)
    at Module.useAsyncData (file:///workspace/.nuxt/dist/server/server.mjs:974:31)
    at file:///workspace/.nuxt/dist/server/server.mjs:58923:146
    at Module.withAsyncContext (/workspace/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7330:21)
    at setup (file:///workspace/.nuxt/dist/server/server.mjs:58923:95)
    at _sfc_main.setup (file:///workspace/.nuxt/dist/server/server.mjs:58982:23)
    at callWithErrorHandling (/workspace/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6650:22)

This error raised when request $fetch with option method: 'POST' and has Body: {..}.

after research i found that issue from this node_modules/ohmyfetch/dist/chunks/fetch.mjs line 122

ctx.options.headers = new Headers(ctx.options.headers);

Headers is undefined, but test same line i see global.Headers available:

console.log('HEADER:', Headers, global.Headers)

HEADER: undefined [class Headers extends URLSearchParams].

Can you help check this issue. Thank you for wonderful plugin!!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
TrungRuetacommented, Dec 25, 2021

@pi0 hi bro . can you help review this issue. i not get issue yesterday (before upgrade to ^3.0.0-27338323.1e98259.

Thank you !!

0reactions
pi0commented, Jan 7, 2022

Issue is fixed by https://github.com/nuxt/framework/pull/2615 however we need improvement in ohmyfetch to use globals by default.

Please consider opening nuxt related issues in nuxt/framework next time 🙏

Read more comments on GitHub >

github_iconTop Results From Across the Web

use $fetch in SSR leading to "Headers is not a function" #46
This error raised when request $fetch with option method: 'POST' and has Body: {..} . ... HEADER: undefined [class Headers extends URLSearchParams] ...
Read more >
reactjs - 'ReferenceError: Headers is not defined' when using ...
I've already tried to add Headers by adding: import fetch from 'node-fetch'; global.fetch = fetch global.
Read more >
Different ways to fetch data in Next.js (server-side) and when ...
The following guide will help you carefully select the server-side data fetching method that suits your app (FYI you can use multiple methods...
Read more >
Data Fetching: getServerSideProps - Next.js
Pages using getServerSideProps will be server side rendered at request time and only be cached if cache-control headers are configured. If you do...
Read more >
NextJS / React SSR: 21 Universal Data Fetching Patterns ...
If you've been using NextJS for a while, you might be asking what exactly should be hard about data fetching? In NextJS, you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found