具有防火墙的sapper -提取未定义

Question

运行npm run dev时会收到此错误

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

我认为rxfire不导入fetch，所以我将这一行添加到src/server.ts中。

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

而错误仍然存在，有什么建议吗？我想我根本不需要再加上这一点。

我只是在src/firebase.ts文件中使用rxfire，如下所示：

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();

谢谢,

J

Answer 1

这是在我的firebase.ts文件中的服务器端尝试使用firebase.ts时引起的一个特定错误。

我能够通过将import 'isomorphic-unfetch'添加到server.ts来解决这个问题。但是，我得到了以下错误：

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

ReferenceError: self is not defined

我意识到在后端显然没有什么可以绑定的对象，所以我找到了一份工作。我不需要在后端导入它，这是一个更大的Sapper Firebase问题。

有关完整修复，请参见my post here。

Answer 2

对于这个错误堆栈跟踪，我也有类似的问题：

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)

我通过将firebase导入更新为

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

Answer 3

首先安装whatwg-fetch。

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

创建一个文件./define-self.js

带着这个内容

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

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

关于你的index.svelte / _layout.svelte

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