Firebase webpack showing error "ReferenceError:fetch is not defined"

Question

在尝试使用 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"

有没有人遇到过类似的问题或advice/workarounds这个问题？

谢谢。

Answer 1

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

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

Similar case for SSR using Firebase

Some options to resolve the issue

Answer 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']
    },
  })
}

Firebase webpack showing error "ReferenceError:fetch is not defined"

Firebase webpack showing error "ReferenceError:fetch is not defined"

firebase

server-side-rendering

angular-universal