sapper with firebase - fetch not defined

Question

I am getting this error when running npm run dev

registerFunctions(firebase$1, fetch.bind(self));
                              ^
ReferenceError: fetch is not defined

I figured rxfire doesn't import fetch, so I add this line to src/server.ts

global['fetch'] = require('node-fetch');

And the error is still there, any suggestions? I would think I would not have to add this at all.

I am just using rxfire in a src/firebase.ts file like so:

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions"; 
import * as config from "./config.json";

firebase.initializeApp(config);

export const auth = firebase.auth();
export const googleProvider = new firebase.auth.GoogleAuthProvider();

export const db = firebase.firestore();
export const functions = firebase.functions();

Thanks,
J

Put a more complete code, where we can see where is that code, what file, and what does it do? — Madacol, Feb 14 '21 at 18:04
see updated code, I am simply using firebase with sapper, not much to it — Jonathan, Feb 14 '21 at 22:01

score 0 · Answer 1 · answered Feb 15 '21 at 04:56

This was a specific error caused when trying to import "firebase/functions" on the server end in my firebase.ts file.

I was able to solve it by adding import 'isomorphic-unfetch' to server.ts. However, then I got this error:

registerFunctions(firebase$1, fetch.bind(self));
                                         ^

ReferenceError: self is not defined

I realized there apparently is no object to bind to on the backend, so I found a work around. I needed to not import it on the backend, which was a bigger Sapper Firebase problem.

See my post here for complete fix.

score 0 · Answer 2 · answered Aug 27 '21 at 11:17

I had similar issue with this error stacktrace :

ReferenceError: fetch is not defined
    at Module.<anonymous> (/var/task/webpack:/Users/dev/projects/node_modules/@firebase/functions/dist/index.esm.js:702:27)
at __webpack_require__ (/var/task/webpack:/webpack/bootstrap:19:1)
at /var/task/webpack:/webpack/bootstrap:83:1
at Object.<anonymous> (/var/task/families.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at Module._require.i.require (/var/task/serverless_sdk/index.js:9:73397)

I solve it by updating the firebase import to

import * as admin from 'firebase-admin';
import firebase from 'firebase/app';

score 0 · Answer 3 · answered Jan 20 '22 at 20:58

first install whatwg-fetch.

npm i --save whatwg-fetch yarn add --save whatwg-fetch pnpm i --save whatwg-fetch

create a file ./define-self.js

with this content

var global =
  (typeof globalThis !== "undefined" && globalThis) ||
  (typeof self !== "undefined" && self) ||
  (typeof global !== "undefined" && global);

if (!global?.self) {
  global.self = global;
}

on your index.svelte / _layout.svelte

<script context="module">
  import "./define-self";
  import "whatwg-fetch";
</script>

sapper with firebase - fetch not defined

3 Answers3