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.
<code>[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
</code>
<code>[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
</code>
[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
<code> "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"
}
</code>
<code> "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"
}
</code>
"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
<code>"@angular/ssr": "^18.1.3",
"@angular/fire": "^18.0.1",
</code>
<code>"@angular/ssr": "^18.1.3",
"@angular/fire": "^18.0.1",
</code>
"@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.
1