Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:
Created 2 years ago
Comments:6 (1 by maintainers)

Top 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 🙏

Top 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] ...

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.

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...

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...

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...