The 'performance' property is absent in the 'FirebaseApp' type, which is necessary in the 'App' type

Encountering an issue during a fresh installation of Angular 7.2 and Firebase, specifically getting this error:

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'.
  Property 'performance' is missing in type 'FirebaseApp' but required in type 'App'.

Experimented with different versions of @angular/fire and firebase, yet unable to discover a successful pairing.

Listing the contents of current package.json :

{
  "name": "my-app",
  "version": "0.0.0",
  ...
}

Seeking insights from anyone who has encountered a similar error. Searching online doesn't yield results related to the 'performance' property. Any suggestions?

angulartypescriptfirebase

Answer №1

Encountering a similar issue myself. Seems like the most recent version of firebase, specifically 5.11.0, is malfunctioning.

Resolved the problem by adjusting my dependencies to 5.10.0.

Remember: avoid using any version prefixes like ~ or ^.

Answer №2

Successfully fixed the problem by explicitly setting firebase's version to "5.0.4" instead of using "^5.0.4".

Answer №3

To update firebase to version 5.10.1, use the following command:

npm install --save [email protected]

This method has been successful for me.

Answer №4

Challenge:

An issue was encountered in the node_modules section while running code, specifically in the file firebase.app.module.d.ts at line 17:22. The error message displayed was: TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'.
The property 'performance' is missing in type 'FirebaseApp' but required in type 'App'.

Line 17 of the file contains the declaration for FirebaseApp implementing app.App {

node_modules/firebase/index.d.ts:1217:5 1217 performance(): firebase.performance.Performance; 'performance' is declared here.

https://i.sstatic.net/ML5fS.jpg

Solution:

To resolve this issue, update the version of firebase to 5.10.1 using the following command:

npm install --save <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4b445f484f4c5e486d18031c1d031c">[email protected]</a>

This solution has been verified to be effective.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: ngModel does not reflect dynamic changes in value

After calling a Spring service, I am receiving JSON data which is stored in the "etapaData" variable. 0: id: 266 aplicacao: {id: 192, nome: "Sistema de Cadastro", checked: false} erro: {id: 220, nome: "Falta de orçamento", checked: false} perfil: {id: 8, ...

angulartypescript

Merging an assortment of items based on specific criteria

I have the following TypeScript code snippet: interface Stop { code: string } interface FareZone { name: string; stops: Stop[]; } const outbound: FareZone[] = [{name: 'Zone A', stops: [{ code: 'C00'}] }, {name: 'Zone B ...

javascripttypescript

The property "property" does not exist within this object

I'm currently developing a peer-to-peer payment system on the Polygon network. I've tried various solutions, such as including any, but none have been successful. Here is the error message I'm encountering: Element implicitly has an 'a ...

reactjstypescriptnext.jsdecentralized-applications

The button values fail to adhere to the specified input length in the Point of Sale application built with Angular

Having an issue with my Point of Sale app. When I enter values using the keyboard, it respects the maxLength limit, but when I enter values using the buttons, it does not respect the limit. Any ideas on how to solve this? <div mat-dialog-content> < ...

angular

Acquire feedback linked to the post

I am currently managing posts and comments separately in my database. The posts are stored with the structure posts {id, text},{id,text}, while the comments are stored with the structure comments {id, text, postId}, {id, text, postId}. My question is, how ...

angularjsfirebase

Changing the Size of a Map using react-simple-maps within a React Application

I'm having difficulties with displaying a France map using react-simple-maps. The issue I'm facing is that the map appears too small despite my efforts to adjust it through CSS, width and height attributes, and by utilizing ZoomableGroup. Unfortu ...

javascriptreactjstypescriptreact-simple-maps

Angular 2: The window.crypto.subtle.importKey function functions properly on 'localhost' but encounters issues on an 'ip' address

As a newcomer to Angular 2, I am working on creating a login form that encrypts and sends the user's emailid and password to the server. I have successfully implemented AES-ECB using AES-CTR from the following link: https://github.com/diafygi/webcry ...

javascriptangularencryptionwebcrypto-api

Discovering the most recent 10 date elements in a JSON object within a React application

I have an array of objects containing a date element. My goal is to identify the 10 most recent dates from this element and display them in a table format. When I attempt to render these dates using a mapping technique that targets each data with data.date ...

reactjstypescriptdatesorting

Angular CLI will consistently refresh the progress bar for clear updates every 5 seconds

Hey, I'm currently working on programming a progress bar that updates every 5 seconds. I'm using clarity along with Angular CLI. This is what my html code looks like: Progress Bar <div class="progress demo"> <progress max="100" val ...

angularprogress-barangular-clivmware-clarityclarity

Comparing React hooks dependency array with TypeScript discriminated unions

In my React app using TypeScript, I encountered a situation where a component's props type is a discriminated union to prevent invalid combinations of props at compile time. However, I faced a dilemma when trying to pass some of those props into a Rea ...

reactjstypescriptreact-hooks

Issue with Angular Application hosted on IIS and failing to properly interpret the percent sign

Encountering an issue with my Angular app while hosted on IIS, trying to hide server name details from response headers. The trouble arises when the app encounters URLs with a % sign, causing unexpected behavior and revealing the server name. Although succ ...

angularurl-rewritinghttp-headersiis-10

End the Angular RxJS stopwatch after a specified number of seconds

I am currently enhancing my scoreboard timer component by incorporating a stopwatch feature. The current setup involves modifying the countdown clock that was previously implemented. The stopwatch is designed to run continuously, but I would like to impl ...

angularrxjs

Utilizing Angular Application within an iOS App's Webview

Is it possible to run an Angular application inside an iOS app using a Webview while keeping the website source files stored locally within the app? Typically, Angular requires a server to run the application, but if the files are kept locally, running a s ...

javascriptiosangularjsangular

Understanding the timing of records being returned via an Observable in Angular's ngOnInit

In my Angular 2 application, I am using an observable to keep track of an array of records. As the results of this observable are stored in the variable "records", I am utilizing *ngFor="let record of records" to iterate over and display them in my view. ...

javascriptangulartypescript

Leveraging Next.js with TypeScript and babel-plugin-module-resolver for simplified import aliases

I am currently in the process of setting up a Next.js project with typescript. Despite following multiple guides, I have encountered an issue concerning import aliases. It's unclear whether this problem stems from my configuration or from Next.js its ...

typescriptimportnext.jsbabel-plugin

Having trouble moving to a different component in Angular?

In my application, I am facing an issue with navigating from List to Details component by passing the ID parameter. It seems that there is no response or error when attempting to call the relevant method. Below, you can find the code snippets related to th ...

javascriptangulartypescriptroutes

What is the process for adding an item to the dictionary state?

I'm currently working on a function to push an object to the state in my code. The goal of this function is to duplicate the first state object and append it to the end of the state array. addField() { const index = (this.state?.fields.length) -1 ...

reactjstypescript

Typescript navigation and Next.js technology

Currently, I am in the process of learning typescript and attempting to create a navigation bar. However, I encountered an error message stating "Unexpected token header. Expected jsx identifier". I am a bit puzzled by this issue. Could someone kindly pro ...

typescriptnext.jsreact-navigation

Exploring the functionalities of objects in Typescript through the use of the for...in loop

After successfully converting the JavaScript function to Typescript, I encountered an issue with the line if (!(key * key) in frequencyCounter2) {. The error message displayed was: "The left-hand side of an 'in' expression must be of type &a ...

javascripttypescriptobject

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

I previously had my context and context provider set up in a file, and everything was working perfectly. However, I recently decided to convert all of my files to TypeScript, including this one. Unfortunately, I've encountered a strange issue that I c ...

javascriptreactjstypescript