Firebase + Nuxt SSR - httpsCallable error "Headers is not defined"

Question

Good morning all !

When using Firebase with a Nuxt application, I encounter problems when calling functions (httpsCallable) once deployed on Heroku.

When calling from the server side (SSR) an error is thrown:

ReferenceError: Headers is not defined
at Service.<anonymous> (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:517:25)
at step (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:139:27)
at Object.next (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:120:57)
at /app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:113:75
at new Promise (<anonymous>)
at Object.__awaiter (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:109:16)
at Service.call (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:508:22)
at /app/node_modules/@firebase/functions/dist/index.node.cjs.js:444:26
at Store.checkToken (server.js:1:31132)
at Array.wrappedActionHandler (/app/node_modules/vuex/dist/vuex.common.js:794:23)

So I understand that firebase-js cannot find in its environment the right "fetch" allowing it to access fetch.Headers because the rendering being on the server side, it does not have the same environment as on the client side / Navigator.

So I tried to import the "node-fetch" or "whatwg-fetch" or "isomorphic-unfetch" module but nothing helps, firebase cannot call the functions.

This behavior does not exist locally, in this case firebase-js manages to make its httpsCallable requests during SSR.

During the global import of whatwg-fetch the error is:

HttpsErrorImpl: internal
at new HttpsErrorImpl (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:59:28)
at _errorForResponse (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:154:12)
at Service.<anonymous> (/app/node_modules/@firebase/functions/dist/index.node.cjs.js:539:33)
at step (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:139:27)
at Object.next (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:120:57)
at fulfilled (/app/node_modules/@firebase/functions/node_modules/tslib/tslib.js:110:62) {
code: 'internal',
details: undefined
}

Has anyone ever had or solved this problem?

Have a good day!

Answer 1

Encountered the same problem. Fetch API was released just this year on Node.js. You can solve this by either using node-fetch module or simply as I did by upgrading your Node.js to version 17.5 or newer.