'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project

Question

I'm setting up a new application in React and I want it to be server side rendered. Unfortunately I'm not able to use Headers since it keeps throwing the error 'ReferenceError: Headers is not defined'.

I've already tried to add Headers by adding:

import fetch from 'node-fetch';

global.fetch = fetch
global.Headers = fetch.Headers;

This still throws the error though.

This is an example of how I'm currently implementing the headers:

const defaultOptions = {
  method: METHOD,
  headers: new Headers({
    'Content-type': 'application/json',
    'X-Request-ID': new Date().getTime().toString(),
  }),
};

Does anyone know what I'm missing to make it build and start?

Answer 1

TL;DR Short Answer, use:

const fetch = require("node-fetch");

var myHeaders = new fetch.Headers();

---

More details: This was my error I was getting while running npm test

var myHeaders = new Headers();
                ^
ReferenceError: Headers is not defined

I found the answer in first line of official MDN page on Headers : https://developer.mozilla.org/en-US/docs/Web/API/Headers

The Headers interface of the Fetch API allows you.... So I tried this:

Old : var myHeaders = new Headers(); to
new : var myHeaders = new fetch.Headers();

Answer 2

Do not use global in SSR, depending on the case it can cause some nasty bugs. For example while you are rendering one user, another one can request website and change the global variable while the first user still has some requests to do.

Regarding fetch - you can set headers like this:

   fetch('https://google.com', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
        }
     }
   );

Answer 3

This worked for me

import fetch, {Headers} from 'node-fetch'

if (!globalThis.fetch) {
  globalThis.fetch = fetch
  globalThis.Headers = Headers
}

I wasn't able to call new fetch.Headers() as suggested by @eaccmk

Answer 4

1/install npm package :

npm install --save node-fetch

2/then import that :

import fetch, { Headers } from "node-fetch";

this worked for me

Answer 5

install npm package.

npm install --save form-data

then import that.

var FormData = require('form-data');