Skip to content

ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object #3442

New issue
New issue
Closed as not planned
Closed as not planned
ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object#3442
Labels
comp: firestoreCloud Firestore (src/firestore).obsoleteConfirmed no longer relevant (removed/deprecated surface or superseded); closed as not planned.type: bugDefect: expected behavior doesn't happen.version: legacy (v7-v16)Targets the older modular API (roughly v7-v16).

Description

@fmauff1978
fmauff1978
opened on Sep 30, 2023

Version info
Angular: 16

Firebase: 7

AngularFire: latest

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node

export class CategoryComponent {

private fs: Firestore = inject(Firestore);
categories$: Observable<Category[]>;

constructor() {
// get a reference to the user-profile collection
const categoryCollection = collection(this.fs, 'categories');

// get documents (data) from the collection using collectionData
this.categories$ = collectionData(categoryCollection) as Observable<Category[]>;

console.log(categoryCollection);
}

}

The Chrome console returns> ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object

What is happening?

Activity

  1. chetelev commented on Oct 7, 2023

    @chetelev
    chetelev
    on Oct 7, 2023

    Any updates on this ? I got the same error

  2. rgant commented on Oct 7, 2023

    @rgant
    rgant
    on Oct 7, 2023

    Well firebase v7 is not appropriate for Angular Fire 7.6.1 (latest).
    https://github.com/angular/angularfire#angular-and-firebase-versions

    And without more details it is hard to diagnose. What is the complete output of ng version? What is your code (in a codeblock)?

    And you should probably create your own Angular Service to wrap the modular functions for better ability to unit test.

  3. chetelev commented on Oct 8, 2023

    @chetelev
    chetelev
    on Oct 8, 2023

    @rgant i tried using various versions including Firebase 9 which says compatible per the documentation.

    Regarding code snippet is the same exact sample written in angularfire docs: https://github.com/angular/angularfire#example-use

    And if we try using angular/fire 7.6 with firebase 9.23.0
    there is a different erorr:

    Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s).

    8 export type CountSnapshot = lite.AggregateQuerySnapshot<{

    9 count: lite.AggregateField;

    10 }, any, DocumentData>;

  4. shadow1349 commented on Oct 14, 2023

    @shadow1349
    shadow1349
    on Oct 14, 2023

    I'm also seeing this error which is totally blocking me from using @angular/fire at all

  5. shadow1349 commented on Oct 14, 2023

    @shadow1349
    shadow1349
    on Oct 14, 2023

    Here's all the info from my application

    package.json

    {
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.2.0",
    "@angular-devkit/core": "~16.2.0",
    "@angular-devkit/schematics": "~16.2.0",
    "@angular-eslint/eslint-plugin": "~16.0.0",
    "@angular-eslint/eslint-plugin-template": "~16.0.0",
    "@angular-eslint/template-parser": "~16.0.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "~16.2.0",
    "@angular/language-service": "~16.2.0",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/angular": "^16.10.0",
    "@nx/eslint-plugin": "16.10.0",
    "@nx/jest": "16.10.0",
    "@nx/js": "16.10.0",
    "@nx/linter": "16.10.0",
    "@nx/nest": "16.10.0",
    "@nx/node": "^16.10.0",
    "@nx/webpack": "16.10.0",
    "@nx/workspace": "16.10.0",
    "@schematics/angular": "~16.2.0",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.7.1",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "autoprefixer": "^10.4.0",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "8.1.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.0",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "16.10.0",
    "postcss": "^8.4.5",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  },
  "dependencies": {
    "@angular/animations": "~16.2.0",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "~16.2.0",
    "@angular/compiler": "~16.2.0",
    "@angular/core": "~16.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "~16.2.0",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "~16.2.0",
    "@angular/platform-browser-dynamic": "~16.2.0",
    "@angular/router": "~16.2.0",
    "@canvasjs/charts": "^3.7.23",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/platform-express": "^10.0.2",
    "axios": "^1.0.0",
    "firebase": "^10.5.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  }
}

    NG Version

    Angular CLI: 16.2.6
Node: 20.8.1 (Unsupported)
Package Manager: npm 10.2.0
OS: darwin arm64

Angular: 16.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.6
@angular-devkit/build-angular   16.2.6
@angular-devkit/core            16.2.6
@angular-devkit/schematics      16.2.6
@angular/cdk                    16.2.8
@angular/cli                    16.2.6
@angular/fire                   7.6.1
@angular/material               16.2.8
@schematics/angular             16.2.6
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3
    
Warning: The current version of Node (20.8.1) is not supported by Angular.

    quiz.services.ts

    import { Injectable } from '@angular/core';
import {
  Firestore,
  collection,
  collectionData,
  orderBy,
  query
} from '@angular/fire/firestore';
import { Quiz } from '@quizapp/models';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class QuizService {
  private quizCol = collection(this.db, 'quizzes');
  constructor(private db: Firestore) {}

  getAllQuizzes() {
    const q = query(this.quizCol, orderBy('createdOn', 'desc'));
    return collectionData(q) as Observable<Quiz[]>;
  }

}

  6. rgant commented on Oct 14, 2023

    @rgant
    rgant
    on Oct 14, 2023

    Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s).

    This is a fix that works for many on that issue: FirebaseExtended/rxfire#88 (comment)

  7. rgant commented on Oct 14, 2023

    @rgant
    rgant
    on Oct 14, 2023

    Warning: The current version of Node (20.8.1) is not supported by Angular.

    Well first off, use Node 18 which is supported by Angular. See nvm to manage various NodeJS versions.

    Second, @angular/fire v7.6.1 does not support firebase@10
    https://github.com/angular/angularfire#angular-and-firebase-versions

    Once you fix those, see my previous comment to find the overrides config currently required for @angular/fire

  8. shadow1349 commented on Oct 14, 2023

    @shadow1349
    shadow1349
    on Oct 14, 2023

    Can you tell me if there's a specific version of firebase 9 I should use? I went to 9.23.0 and it doesn't seem to pick up the initializeApp call.

    app.config.ts

    import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment.development';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    provideAnimations(),
    importProvidersFrom([
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideFirestore(() => getFirestore()),
    ]),
  ],
};
    image

    I have another project using Angular 15 (Angular Fire 7.5.0 & Firebase 9.18.0) with an identical config that works fine. I also tried firebase 9.18.0, which made no difference.

    I also tried swapping around my service

    @Injectable({
  providedIn: 'root',
})
export class QuizService {
  private db = inject(Firestore);
  private quizCol = collection(this.db, 'quizzes');

  getAllQuizzes() {
    const q = query(this.quizCol, orderBy('createdOn', 'desc'));
    return collectionData(q) as Observable<Quiz[]>;
  }
}

    Again, no change.

  9. fmauff1978 commented on Oct 15, 2023

    @fmauff1978
    fmauff1978
    on Oct 15, 2023 via email
    Author

  10. shadow1349 commented on Oct 16, 2023

    @shadow1349
    shadow1349
    on Oct 16, 2023

    There's no app module; it's a standalone angular app. So the app config goes straight into the main.ts

    main.ts

    import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

  11. rgant commented on Oct 16, 2023

    @rgant
    rgant
    on Oct 16, 2023
    import { environment } from '../environments/environment.development';

    If you are using Angular Environments correctly you should be importing:

    import { environment } from '../environments/environment';

    When you run ng serve or ng build then Angular will look at the defaultConfiguration in your angular.json or your --configuration flag will determine which environment.[NAME].ts file replaces environment.ts.

    Edit: to be clear, your problem is that in provideFirebaseApp(() => initializeApp(environment.firebase)) I believe your environment.firebase is undefined and this error is the one you get when calling initializeApp without a configuration.

  12. shadow1349 commented on Oct 17, 2023

    @shadow1349
    shadow1349
    on Oct 17, 2023

    It's definitely not undefined, I rolled back @angular/fire from 7.6.1 to 7.6.0 and it started working

  13. fmauff1978 commented on Oct 17, 2023

    @fmauff1978
    fmauff1978
    on Oct 17, 2023 via email
    Author

  14. rgant commented on Oct 17, 2023

    @rgant
    rgant
    on Oct 17, 2023

    It's definitely not undefined, I rolled back @angular/fire from 7.6.1 to 7.6.0 and it started working

    Please do read the linked documentation for how Angular Environments work.

  15. axp3780 commented on Oct 18, 2023

    @axp3780
    axp3780
    on Oct 18, 2023

    So I am using @angular/fire v7.6.1 and firebase v10.5.0. I am getting "authstateReady() missing in @angular/fire/auth but required in @firebase/auth."
    Turns out they have introduced authstateReady() in v10.1.0 firebase. So I used firebase v9.23.0 and got this error
    "Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s)."

    now to solve this error i installed ~rxfire:6.3.0 and now i got this error after successful compilation
    "ERROR FirebaseError: Expected type 'Query', but it was: a custom fh object"

    here is my package.json

    ` "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^16.2.1",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@ng-bootstrap/ng-bootstrap": "^15.1.0",
    "@ngneat/hot-toast": "^6.0.1",
    "@ngneat/overview": "^5.1.0",
    "@ngneat/until-destroy": "^10.0.0",
    "@popperjs/core": "^2.11.6",
    "angular-datatables": "^16.0.0",
    "bootstrap": "^5.3.1",
    "datatables.net": "^1.11.3",
    "datatables.net-dt": "^1.11.3",
    "firebase": "^10.5.0",
    "jquery": "^3.7.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.6",
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@angular/localize": "^16.1.0",
    "@types/datatables.net": "^1.10.21",
    "@types/jasmine": "~4.3.0",
    "@types/jquery": "^3.5.9",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3",
    "webpack": "^5.88.2",
    "webpack-dev-server": "^4.15.1"
  }
}
`

    and this is how i have initialized the app in app.module.ts

    provideFirebaseApp(() => initializeApp(environment.firebase)),
 provideAuth(() => getAuth()),
 provideDatabase(() => getDatabase()),
 provideFirestore(() => getFirestore()),

  16. shadow1349 commented on Oct 18, 2023

    @shadow1349
    shadow1349
    on Oct 18, 2023

    It's in an NX monorepo. I only have 1 env file (env.development) and in project.json there are no file replacement rules. The env.firebase was not the problem.

  17. mkamakshi commented on Mar 9, 2024

    @mkamakshi
    mkamakshi
    on Mar 9, 2024

    I am using React and Firebase. I added env file and changed all the config constannts into env variables and I noticed this error.
    Now I am unable to deploy my application.
    I upgraded to the latest version of Firebase. Still, seeing the error.
    Can somebody help?

  18. gustavodamazio commented on Apr 6, 2024

    @gustavodamazio
    gustavodamazio
    on Apr 6, 2024

    To ensure that Angular Fire 7.6.1 functions correctly, the Firebase package installed indirectly in the node_modules must not be in version 10, as Angular Fire is encountering issues when injecting dependencies. Additionally, we need to downgrade the rxfire package from 6.0.5 to 6.0.4 to resolve the typing complaints.

    The required versions working are:

    "@angular/fire": "7.6.1",
    "rxfire": "6.0.4",
    "firebase": "9.23.0"

    While downgrading the Firebase package to v9.23.0 to ensure Angular Fire 7.6.1 compatibility, it's important to note that this will result in the loss of some functionalities that were introduced in the Firebase SDK v10, such as the count() feature.

    This is a tradeoff that needs to be considered - maintaining the Angular Fire 7.6.1 compatibility by using the older Firebase SDK version, or potentially upgrading Angular Fire to a newer version that supports the Firebase SDK v10 functionalities.

    The decision will depend on the specific requirements of the project and whether the lost functionality from the Firebase SDK v10 is critical. It's worth exploring if there are any workarounds or alternative approaches that could be used to regain the desired features while still keeping Angular Fire 7.6.1 compatible.

    Please let me know if you need any clarification or have additional context to share on this issue.

  19. AmaldevAD commented on Dec 20, 2024

    @AmaldevAD
    AmaldevAD
    on Dec 20, 2024

    For fixing app not initialized go with following in appConfig

    import { ApplicationConfig, importProvidersFrom } from '@angular/core';
    import { provideRouter } from '@angular/router';
    import { provideAnimations } from '@angular/platform-browser/animations';

    import { routes } from './app.routes';
    import { provideFirebaseApp,initializeApp } from '@angular/fire/app';
    import { environment } from '../environment/environment';
    import { provideFirestore,getFirestore } from '@angular/fire/firestore';
    // import { getFirestore } from 'firebase/firestore/lite';
    // import { initializeApp } from '@firebase/app';

    export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes),[
    provideFirebaseApp(()=>initializeApp(environment.firebaseConfig)),
    provideFirestore(()=>getFirestore())
    ],]
    };

    For Querry issue

    I would recommend trying async

    private firestore = inject(Firestore); // Inject Firestore service
    private contactsRef = collection(this.firestore, );

    async getContacts(): Promise<any[]> {
    try {
    const querySnapshot = await getDocs(query(this.contactsRef)); /
    const contactsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    return contactsList;
    } catch (error) {
    console.error("Error fetching :", error);
    throw error;
    }
    }

  20. armando-navarro
    added
    type: bugDefect: expected behavior doesn't happen.
    comp: firestoreCloud Firestore (src/firestore).
    obsoleteConfirmed no longer relevant (removed/deprecated surface or superseded); closed as not planned.
    version: legacy (v7-v16)Targets the older modular API (roughly v7-v16).
    on Jul 22, 2026

  21. armando-navarro commented on Jul 22, 2026

    @armando-navarro
    armando-navarro
    on Jul 22, 2026
    Collaborator

    This traces to running @angular/fire 7.6.1 against firebase 10 with a mismatched rxfire, a combination that version of AngularFire never supported, and the thread's working pins (firebase 9.23 with rxfire 6.0.4, or moving up to AngularFire 16+) resolve it.

    Later releases ship aligned dependencies, so I am closing this as obsolete. If you hit the same 'Expected type Query' error on current versions, it is usually two copies of the firebase SDK in the tree, so please open a new issue with your npm ls firebase output and we will dig in.

  22. armando-navarro
    closed this as not plannedon Jul 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    comp: firestoreCloud Firestore (src/firestore).obsoleteConfirmed no longer relevant (removed/deprecated surface or superseded); closed as not planned.type: bugDefect: expected behavior doesn't happen.version: legacy (v7-v16)Targets the older modular API (roughly v7-v16).

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions