Search code examples
angulargoogle-cloud-functions

Angular Firebase functions crash with SSR in Angular 18


When I add import { AngularFireFunctions } from '@angular/fire/compat/functions'; to a component, the second that component loads, the entire frontend crashes fatally with the following error. I remove that import and everything goes back to working smoothly.

[vite] Error when evaluating SSR module [...] .angular/cache/18.1.3/vite/deps_ssr/@angular_fire_compat_functions.js
TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@firebase/functions/node_modules/undici/lib/fetch/file.js

I've seen solutions removing SSR, but I don't want to do that, and according to this page, @angular/fire is compatible with SSR rendering.

In angular.json I have

        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            ...
            "polyfills": ["@angular/localize/init", "zone.js"],
            ...
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }

In package.json, I have

"@angular/ssr": "^18.1.3",
"@angular/fire": "^18.0.1",

I'm using Angular 18.1.2 and Node.js v20.11.0. Any help will be greatly appreciated.


Solution

  • As @SandeepVokkareni suggested, upgrading node to the latest version (v22.6.0) did solve this issue for me, but only after removing the node-modules folder, the package-lock.json file, and reinstalling all packages with npm i --legacy-peer-deps --save. I wonder if deleting the folder and reinstalling the packages without the node version upgrade would have done the trick.