18.1.0: Firebase "Class extends value undefined is not a constructor or null" #28038

niwolf · 2024-07-11T13:22:43Z

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

After updating to version 18.1.0. I am getting the following error on ng-serve:

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
Re-optimizing dependencies because lockfile has changed
15:17:17 [vite] Error when evaluating SSR module /@fs/{pathToRepo}/.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js?v=de27081b:
|- TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (/{pathToRepo}/.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5662:36)

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

15:17:17 [vite] Error when evaluating SSR module /@fs/{pathToRepo}/.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js?v=de27081b:
|- TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (/{pathToRepo}/.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5662:36)

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 18.1.0
Node: 18.20.2
Package Manager: npm 10.5.0
OS: darwin arm64

Angular: 18.1.0
... animations, build, cdk, cli, common, compiler, compiler-cli
... core, forms, material, platform-browser
... platform-browser-dynamic, platform-server, router, ssr

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1801.0
@angular-devkit/core         18.1.0
@angular-devkit/schematics   18.1.0
@angular/fire                18.0.1
@schematics/angular          18.1.0
rxjs                         7.8.1
typescript                   5.4.5
zone.js                      0.14.7

Anything else?

No response

The text was updated successfully, but these errors were encountered:

thePunderWoman · 2024-07-11T16:01:41Z

@niwolf Can you provide a minimal reproduction for us? Otherwise there's nothing actionable here for us to look into.

clcarter · 2024-07-12T01:49:58Z

Had the same problem. Looks like the issue is caused by conflicting versions of the undici dependency, installed by @angular/fire and @angular-devkit/build-angular.

pnpm why undici
Legend: production dependency, optional only, dev only

[email protected] ~/workspace/webdocs/test

dependencies:
@angular/fire 18.0.1
├─┬ firebase 10.12.3
│ ├─┬ @firebase/auth 1.7.5
│ │ └── undici 5.28.4
│ ├─┬ @firebase/auth-compat 0.5.10
│ │ ├─┬ @firebase/auth 1.7.5
│ │ │ └── undici 5.28.4
│ │ └── undici 5.28.4
│ ├─┬ @firebase/firestore 4.6.4
│ │ └── undici 5.28.4
│ ├─┬ @firebase/firestore-compat 0.3.33
│ │ └─┬ @firebase/firestore 4.6.4
│ │   └── undici 5.28.4
│ ├─┬ @firebase/functions 0.11.6
│ │ └── undici 5.28.4
│ ├─┬ @firebase/functions-compat 0.3.12
│ │ └─┬ @firebase/functions 0.11.6
│ │   └── undici 5.28.4
│ ├─┬ @firebase/storage 0.12.6
│ │ └── undici 5.28.4
│ └─┬ @firebase/storage-compat 0.3.9
│   └─┬ @firebase/storage 0.12.6
│     └── undici 5.28.4
└─┬ rxfire 6.0.5
  └─┬ firebase 10.12.3 peer
    └─┬ @firebase/auth 1.7.5
      └── undici 5.28.4

devDependencies:
@angular-devkit/build-angular 18.1.0
├─┬ @angular/build 18.1.0
│ └── undici 6.19.2
└── undici 6.19.2

Fix was to simply add an override in package.json (Example for pnpm):

  "pnpm": {
    "overrides" : {
      "undici": "6.19.2",
      "undici-types": "6.19.2"
    }
  }

Then, after deleting the lockfile and node_modules, and reinstalling packages, everything worked.

Hope this helps!

niwolf · 2024-07-12T06:25:33Z

@niwolf Can you provide a minimal reproduction for us? Otherwise there's nothing actionable here for us to look into.

@thePunderWoman Unfortunately not really, sorry.
As note: I am using SSR and AngularFire. Before updating the Angular core packages from 18.0.x to 18.1.0 everything was working fine. After updating to 18.1.0 I just got these error messages after ng serve compiled successfully:

08:15:13 [vite] Error when evaluating SSR module /@fs/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js?v=de27081b:
|- TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5662:36)
  at __require2 (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/chunk-INDP74QC.js:50:50)
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/formdata.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5854:9)
    
08:15:13 [vite] Error when evaluating SSR module /main.server.mjs:
|- TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5662:36)
  at __require2 (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/chunk-INDP74QC.js:50:50)
    at node_modules/@firebase/auth/node_modules/undici/lib/fetch/formdata.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5854:9)
   
08:15:13 [vite] Internal server error: Class extends value undefined is not a constructor or null
      at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5662:36)
      at __require2 (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/chunk-INDP74QC.js:50:50)
      at node_modules/@firebase/auth/node_modules/undici/lib/fetch/formdata.js (/Users/... {pathToMyRepo}.../.angular/cache/18.1.0/vite/deps_ssr/@angular_fire_firestore.js:5854:9)

I hope this is helping you.

niwolf · 2024-07-12T06:33:58Z

Had the same problem. Looks like the issue is caused by conflicting versions of the undici dependency, installed by @angular/fire and @angular-devkit/build-angular.

pnpm why undici
Legend: production dependency, optional only, dev only

[email protected] ~/workspace/webdocs/test

dependencies:
@angular/fire 18.0.1
├─┬ firebase 10.12.3
│ ├─┬ @firebase/auth 1.7.5
│ │ └── undici 5.28.4
│ ├─┬ @firebase/auth-compat 0.5.10
│ │ ├─┬ @firebase/auth 1.7.5
│ │ │ └── undici 5.28.4
│ │ └── undici 5.28.4
│ ├─┬ @firebase/firestore 4.6.4
│ │ └── undici 5.28.4
│ ├─┬ @firebase/firestore-compat 0.3.33
│ │ └─┬ @firebase/firestore 4.6.4
│ │   └── undici 5.28.4
│ ├─┬ @firebase/functions 0.11.6
│ │ └── undici 5.28.4
│ ├─┬ @firebase/functions-compat 0.3.12
│ │ └─┬ @firebase/functions 0.11.6
│ │   └── undici 5.28.4
│ ├─┬ @firebase/storage 0.12.6
│ │ └── undici 5.28.4
│ └─┬ @firebase/storage-compat 0.3.9
│   └─┬ @firebase/storage 0.12.6
│     └── undici 5.28.4
└─┬ rxfire 6.0.5
  └─┬ firebase 10.12.3 peer
    └─┬ @firebase/auth 1.7.5
      └── undici 5.28.4

devDependencies:
@angular-devkit/build-angular 18.1.0
├─┬ @angular/build 18.1.0
│ └── undici 6.19.2
└── undici 6.19.2

Fix was to simply add an override in package.json (Example for pnpm):

  "pnpm": {
    "overrides" : {
      "undici": "6.19.2",
      "undici-types": "6.19.2"
    }
  }

Then, after deleting the lockfile and node_modules, and reinstalling packages, everything worked.

Hope this helps!

@clcarter This also seems to work for me. Thank you vm!
Maybe the conflicting versions of the undici dependency, can still be fixed?

alan-agius4 · 2024-07-12T08:09:46Z

The Angular CLI does not depend on undici; it is solely a devDependency and is not installed in the user's project. The fact that the issue is resolved by the override suggests a problem with undici version 5.28.4, which has been addressed in later versions. Therefore, it is likely that the firebase packages should be updated to use a newer version of undici.

niwolf · 2024-07-12T08:58:46Z

The Angular CLI does not depend on undici; it is solely a devDependency and is not installed in the user's project. The fact that the issue is resolved by the override suggests a problem with undici version 5.28.4, which has been addressed in later versions. Therefore, it is likely that the firebase packages should be updated to use a newer version of undici.

@alan-agius4 Thanks for your answer.
Ok, I only use AngularFire. Can AngularFire be updated when the firebase packages were updated to use a newer version of undici? So that might fix the issue, won't it?

alan-agius4 · 2024-07-12T09:05:20Z

AngularFire is managed by the firebase team.

niwolf · 2024-07-12T09:06:23Z

AngularFire is managed by the firebase team.

Alright, got it. Thanks again!

alan-agius4 · 2024-07-15T14:07:01Z

Closing this since there are no actionable items for us at this time.

Ken-Wainwright · 2024-07-18T10:07:32Z

I have the exact same problem. I have setup a new web app project in Visual Code and did not change any code at all. Everything works fine. then I add @angular/fire and the first error I got was No overload matches this call.
Overload 1 of 3, '(options: FirebaseOptions, name?: string | undefined): FirebaseApp', gave the following error.
Object literal may only specify known properties, and '"locationId"' does not exist in type 'FirebaseOptions'.
Overload 2 of 3, '(options: FirebaseOptions, config?: FirebaseAppSettings | undefined): FirebaseApp', gave the following error.
Object literal may only specify known properties, and '"locationId"' does not exist in type 'FirebaseOptions'. [plugin angular-compiler]

I commented out the locationID line but then I got 0:48:08 [vite] Error when evaluating SSR module /@fs/C:/Users/HP ProDesk i5/angularWorkspace/web-app/.angular/cache/18.1.1/vite/deps_ssr/chunk-UEELBQ5E.js?v=9fb4ba3a:
|- TypeError: Class extends value undefined is not a constructor or null
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (eval
at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5603:36)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/formdata.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5795:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/body.js (eval
at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5971:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/response.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :13858:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/index.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :19773:33)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)

10:48:08 [vite] Error when evaluating SSR module /@fs/C:/Users/HP ProDesk i5/angularWorkspace/web-app/.angular/cache/18.1.1/vite/deps_ssr/@angular_fire_firestore.js?v=9fb4ba3a:
|- TypeError: Class extends value undefined is not a constructor or null
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/file.js (eval
at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5603:36)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/formdata.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5795:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/body.js (eval
at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :5971:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/lib/fetch/response.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :13858:9)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)
at node_modules/@firebase/auth/node_modules/undici/index.js (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :19773:33)
at __require2 (eval at instantiateModule (file:///C:/Users/HP%20ProDesk%20i5/angularWorkspace/web-app/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53441:24), :53:50)

I I decided to check things out and the app runs fine if I comment out
//provideFirestore(() => getFirestore()),
//provideStorage(() => getStorage()),

JGSolutions · 2024-07-20T01:49:31Z

@clcarter
what is pnpm? Is it another object nderneath devDependencies?
"devDependencies": { ... },
"pnpm": {
"overrides" : {
"undici": "6.19.2",
"undici-types": "6.19.2"
}
}

clcarter · 2024-07-20T05:33:30Z

pnpm is a package management system, like yarn or npm itself. Here in the package.json file, "pnpm" is a top-level object used to configure pnpm. undici and undici-types are the only dependencies for which I'm enforcing version resolution. You can read more pnpm's package_json page.

For yarn you would either use the yarn set resolution command, or you would add the resolutions object to your package.json.

"resolutions": {
 "undici": "6.19.2",
 "undici-types": "6.19.2"
}

For npm, as of version 8.3, you can use the top-level overrides object:

"overrides" : {
  "undici": "6.19.2",
  "undici-types": "6.19.2"
}

reference: https://stackoverflow.com/questions/52416312/npm-equivalent-of-yarn-resolutions

JGSolutions · 2024-07-20T12:24:39Z

thx @clcarter works.

I hope the angularFire team and implement a proper fix for this but. So far so good. :)

AhsanAyaz · 2024-08-06T09:47:35Z

Thanks @clcarter . That helped! ❤️
Hoping the the firebase team fixes this soon!

alexdabast · 2024-08-12T09:32:23Z

@JGSolutions and @AhsanAyaz if no body raise the issue on angular/fire repo I doubt that it will be fixed ...

JGSolutions · 2024-08-12T16:49:34Z

Sad!

saifullahamin · 2024-08-14T17:34:02Z

@clcarter works, thanks.

robertIsaac · 2024-08-18T13:32:07Z

BTW disabling angular cache ng cache disable fix the problem
@alan-agius4 can you take a look why this happen with cache enabled?

robertIsaac · 2024-08-18T14:07:51Z

@clcarter using

"overrides" : {
  "undici": "6.19.2",
  "undici-types": "6.19.2"
}

while make ng serve works
it makes my tests fails

    ReferenceError: ReadableStream is not defined
...
    > 5 | import { getAuth } from 'firebase/auth';
        | ^
...
      at Object.<anonymous> (../../node_modules/undici/lib/web/fetch/response.js:536:3)
      at Object.<anonymous> (../../node_modules/undici/lib/web/fetch/index.js:11:5)
      at Object.<anonymous> (../../node_modules/undici/index.js:106:19)
      at Object.<anonymous> (../../node_modules/@firebase/auth/dist/node/totp-e2052706.js:7:14)
      at Object.<anonymous> (../../node_modules/@firebase/auth/dist/node/index.js:5:12)
      at Object.<anonymous> (../../node_modules/firebase/auth/dist/index.cjs.js:5:12)

angular-automatic-lock-bot · 2024-09-18T00:10:38Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

ngbot bot modified the milestone: Backlog Jul 11, 2024

alxhub transferred this issue from angular/angular Jul 11, 2024

alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Jul 11, 2024

This comment was marked as off-topic.

Sign in to view

alan-agius4 changed the title ~~18.1.0.: "Class extends value undefined is not a constructor or null"~~ 18.1.0.: Firebas "Class extends value undefined is not a constructor or null" Jul 12, 2024

alan-agius4 changed the title ~~18.1.0.: Firebas "Class extends value undefined is not a constructor or null"~~ 18.1.0.: Firebase "Class extends value undefined is not a constructor or null" Jul 12, 2024

alan-agius4 changed the title ~~18.1.0.: Firebase "Class extends value undefined is not a constructor or null"~~ 18.1.0: Firebase "Class extends value undefined is not a constructor or null" Jul 12, 2024

alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Jul 15, 2024

JGSolutions mentioned this issue Jul 20, 2024

8.1.0: Firebase "Class extends value undefined is not a constructor or null" angular/angularfire#3554

Open

oarshad mentioned this issue Jul 21, 2024

ERROR TypeError: Cannot read properties of undefined (reading 'firestore') angular/angularfire#3553

Open

alexdabast mentioned this issue Aug 12, 2024

Class extends value undefined is not a constructor or null angular/angularfire#3560

Closed

alan-agius4 mentioned this issue Aug 25, 2024

Class extends value undefined is not a constructor or null angular/angular#57515

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

18.1.0: Firebase "Class extends value undefined is not a constructor or null" #28038

18.1.0: Firebase "Class extends value undefined is not a constructor or null" #28038

niwolf commented Jul 11, 2024

thePunderWoman commented Jul 11, 2024

clcarter commented Jul 12, 2024

niwolf commented Jul 12, 2024

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 12, 2024

This comment was marked as off-topic.

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 12, 2024

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 15, 2024

Ken-Wainwright commented Jul 18, 2024

JGSolutions commented Jul 20, 2024

clcarter commented Jul 20, 2024 •

edited

Loading

JGSolutions commented Jul 20, 2024

AhsanAyaz commented Aug 6, 2024

alexdabast commented Aug 12, 2024

JGSolutions commented Aug 12, 2024

saifullahamin commented Aug 14, 2024

robertIsaac commented Aug 18, 2024 •

edited

Loading

robertIsaac commented Aug 18, 2024 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 18, 2024

18.1.0: Firebase "Class extends value undefined is not a constructor or null" #28038

18.1.0: Firebase "Class extends value undefined is not a constructor or null" #28038

Comments

niwolf commented Jul 11, 2024

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

thePunderWoman commented Jul 11, 2024

clcarter commented Jul 12, 2024

niwolf commented Jul 12, 2024

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 12, 2024

This comment was marked as off-topic.

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 12, 2024

niwolf commented Jul 12, 2024

alan-agius4 commented Jul 15, 2024

Ken-Wainwright commented Jul 18, 2024

JGSolutions commented Jul 20, 2024

clcarter commented Jul 20, 2024 • edited Loading

JGSolutions commented Jul 20, 2024

AhsanAyaz commented Aug 6, 2024

alexdabast commented Aug 12, 2024

JGSolutions commented Aug 12, 2024

saifullahamin commented Aug 14, 2024

robertIsaac commented Aug 18, 2024 • edited Loading

robertIsaac commented Aug 18, 2024 • edited Loading

angular-automatic-lock-bot bot commented Sep 18, 2024

Please provide the environment you discovered this bug in (run `ng version`)

clcarter commented Jul 20, 2024 •

edited

Loading

robertIsaac commented Aug 18, 2024 •

edited

Loading

robertIsaac commented Aug 18, 2024 •

edited

Loading