Firebase webpack 显示错误“ReferenceError:fetch is not defined”答案

【问题标题】：Firebase webpack showing error "ReferenceError:fetch is not defined"Firebase webpack 显示错误“ReferenceError:fetch is not defined”
【发布时间】：2021-03-22 02:17:55
【问题描述】：

在尝试使用 firebase 构建 Angular 通用 ssr 时，我遇到了一些引发“ReferenceError: fetch is not defined”错误的问题。

错误：

> /Users/ooicw/Minimum_reproducible_example/dist/server.js:267054
> registerFunctions(_firebase_app__WEBPACK_IMPORTED_MODULE_0__["default"],
> fetch.bind(self));
>                                                                          ^
> 
> ReferenceError: fetch is not defined
>     at Module.<anonymous> (/Users/ooicw/Minimum_reproducible_example/dist/server.js:267054:74)
>     at __webpack_require__ (/Users/ooicw/Minimum_reproducible_example/dist/server.js:26:30)
>     at Module.<anonymous> (/Users/ooicw/Minimum_reproducible_example/dist/server.js:265886:77)
>     at __webpack_require__ (/Users/ooicw/Minimum_reproducible_example/dist/server.js:26:30)
>     at Object.firebase (/Users/ooicw/Minimum_reproducible_example/dist/server.js:154095:18)
>     at __webpack_require__ (/Users/ooicw/Minimum_reproducible_example/dist/server.js:151524:30)
>     at Object../src/app/auth.service.ts (/Users/ooicw/Minimum_reproducible_example/dist/server.js:152588:18)
>     at __webpack_require__ (/Users/ooicw/Minimum_reproducible_example/dist/server.js:151524:30)
>     at Object../src/app/home/desktop-home.component.ngfactory.js (/Users/ooicw/Minimum_reproducible_example/dist/server.js:152882:33)
>     at __webpack_require__ (/Users/ooicw/Minimum_reproducible_example/dist/server.js:151524:30)
> npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! roomer-app@0.0.0
> serve:ssr: `node dist/server` npm ERR! Exit status 1 npm ERR!  npm
> ERR! Failed at the roomer-app@0.0.0 serve:ssr script. npm ERR! This is
> probably not a problem with npm. There is likely additional logging
> output above.
> 
> npm ERR! A complete log of this run can be found in: npm ERR!    
> /Users/ooicw/.npm/_logs/2021-03-27T05_12_14_383Z-debug.log

这个问题发生在我升级 firebase 和 @angular/fire 版本时：

"@angular/fire": "^6.1.4"
"firebase": "^7.24.0"

有没有人遇到过类似的问题或对此问题有任何建议/解决方法？

谢谢。

【问题讨论】：

"寻求调试帮助的问题（'为什么这段代码不工作？'）必须包括期望的行为、特定问题或错误和必要的最短代码 在问题本身。没有明确的问题陈述的问题对其他读者没有用处。请参阅：@ 987654321@" 另外：请勿发文字图片。而是将内容作为纯文本发布，并使用 Stack Overflow 的格式化功能对其进行标记。
最好将代码、错误和结构包含为文本，而不是链接和图像。这样，如果答案中需要它们，可以复制和粘贴它们。此外，图片不可搜索，这可能会妨碍未来的读者找到问题。
嘿@Jay，你是对的，我不认为图像有这些缺点。我已经编辑了问题，感谢您的建议。

标签： firebase server-side-rendering angular-universal

【解决方案1】：

对于这个错误，我已经设法通过排除 firebase 节点模块来解决它，因为项目中有多个节点模块。

以下是 Firebase 工程师提供的一些解决方法：

Similar case for SSR using Firebase

Some options to resolve the issue

【讨论】：

【解决方案2】：

如果有人在 Firebase 发布 v9+ 模块化版本后遇到此问题：在 Gatsbyjs 中，我通过在 webpack 配置中指定以下内容解决了这个问题：

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: { "util": false },
      alias: {
        ['firebase/app']: path.resolve(__dirname, 'node_modules/firebase/app/dist/index.cjs.js'),
        ['firebase/auth']: path.resolve(__dirname, 'node_modules/firebase/auth/dist/index.cjs.js'),
        ['firebase/firestore']: path.resolve(__dirname, 'node_modules/firebase/firestore/dist/index.cjs.js'),
        ['firebase/storage']: path.resolve(__dirname, 'node_modules/firebase/storage/dist/index.cjs.js'),
        ['@firebase/storage']: path.resolve(__dirname, 'node_modules/@firebase/storage/dist/index.cjs.js'),
        ['firebase/functions']: path.resolve(__dirname, 'node_modules/firebase/functions/dist/index.cjs.js'),
        ['@firebase/functions']: path.resolve(__dirname, 'node_modules/@firebase/functions/dist/index.node.cjs.js'),
        ['firebase/performance']: path.resolve(__dirname, 'node_modules/firebase/performance/dist/index.cjs.js'),
        ['@firebase/performance']: path.resolve(__dirname, 'node_modules/@firebase/performance/dist/index.cjs.js'),
        ['firebase/analytics']: path.resolve(__dirname, 'node_modules/firebase/analytics/dist/index.cjs.js'),
        ['@firebase/analytics']: path.resolve(__dirname, 'node_modules/@firebase/analytics/dist/index.cjs.js'),
        ['@firebase/installations']: path.resolve(__dirname, 'node_modules/@firebase/installations/dist/index.cjs.js'),
        ['idb']: path.resolve(__dirname, 'node_modules/idb/lib/node.js'),
      },
      extensions: ['.ts', '.js']
    },
  })
}

【讨论】：