I'm encountering an issue where Typescript is unable to locate the Firebase package that I

I have a TypeScript project that consists of multiple .ts files which need to be compiled into .js files for use in other projects.

One of the files requires the firebase package but it's not being found. The package is installed and located inside the node_modules folder. When I try:

import firebase from 'firebase'; and run tsc, I encounter the following error:

lib/api.ts:2:22 - error TS2307: Cannot find module 'firebase'.

2 import firebase from 'firebase';
                       ~~~~~~~~~~

Found 1 error.

I've attempted deleting the node_modules folder, package-lock.json, and running npm uninstall firebase, but none of these solutions seem to be effective.

Here is my package.json:

{
  "name": "project-models",
  "version": "1.0.1",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "private": true,
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jonas Wallmann",
  "license": "ISC",
  "dependencies": {
    "firebase": "^6.2.3"
  },
  "devDependencies": {
    "typescript": "^3.5.2"
  }
}

And here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",                          
    "declaration": true,                   
    "outDir": "./dist",                        
    "strict": false,                           
    "strictPropertyInitialization": false,  
    "esModuleInterop": true                   
  }
}

Any advice on how to resolve this issue?

typescriptfirebasenpm

Answer №1

It seems that the type definition files may not be included in the main npm package. You can attempt to solve this issue by executing 

npm install @types/firebase --save-dev
from the project's root directory and then try compiling once more.

Answer №2

Fixing a common error, I successfully resolved the issue by simply changing import 'firebase' to import 'firebase/app'. More details can be found at this link.

Although the import error was fixed, a new obstacle arose as TypeScript raised an issue with firebase.auth(), indicating that auth method was missing in firebase. The solution is outlined [here]:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

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

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

I've been working on a UI layout that includes checkboxes on the left, a data table on the right, and a drop zone box. The aim is to keep the table data updated whenever a new file is dropped, and also filter the data based on checkbox selection. I ma ...

javascriptreactjstypescriptredux

Encountering an error with the Angular 2 SimpleChanges Object during the initial npm start process

Within my Angular 2 application, there exists a component that holds an array of objects and passes the selected object to its immediate child component for displaying more detailed data. Utilizing the "SimpleChanges" functionality in the child component a ...

node.jshttpwebangulartypescript

Steering clear of the generic Function type in React with TypeScript

Can anyone help me find a guideline that prohibits the use of "Function" as a type? myMethod: Function; I have searched but couldn't locate any information on this. Appreciate any suggestions :) ...

reactjstypescripteslint

Obtain the combination of values within an array object

I am attempting to write the specifications for a function that can take records of any structure and convert the values into a discriminated union. For example: const getKeys = <T extends {key: string}>(items: T[]): T['key'] => { // ...

typescripttypescript-generics

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Tips on effectively transferring formarray to another component

I'm attempting to pass a formarray to a child component in order to display the values within the formarray there. Here is my current code, but I am struggling to figure out how to show the formarray values in the child component. app.component.html ...

javascriptangulartypescriptangular-reactive-formsformarray

AngularFire Google OAuth failing to retrieve the user's email address

I am trying to retrieve the email address from Google OAuth using AngularFire, but the popup is not requesting permission for the email. This code snippet is from the Firebase Google authentication documentation var ref = new Firebase("https://<your-f ...

javascriptangularjsfirebaseangularfire

What is the best way to style numbers in node.js?

Is there a way to convert values like 1k to 1000 or 1m to 100000 and so forth? 1k - 10000 100k - 100000 1m - 1000000 1b - 1000000000 I have scoured the internet in search of an npm package that can handle this conversion, but I have come up empty-handed. ...

node.jsnpm

Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a ti ...

angulartypescriptbootstrap-4

Tips for transforming your angular application into a custom npm package or library

Recently, I've been working on an Angular application that fetches photos and videos from a server and displays them as a slide one at a time. Now, I'm faced with the task of integrating this functionality into another app. Is there a method to t ...

node.jsangularnpmpackage

Ways to limit the combination of general types in Typescript?

Struggling to develop a React form component with generic types. The initialValues parameter determines the generic type for the form. Unable to figure out how to specify the type for each field in Typescript. Check out my CodeSandbox where I've at ...

reactjstypescriptgenericstypescript-generics

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

I've been facing issues trying to run my Jasmine test suite with webpack 4. Ever since I upgraded webpack, I keep getting this error message in almost every test: Error: <spyOn> : getField is not declared writable or has no setter The problem ...

typescriptwebpackjasminekarma-jasminewebpack-4

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Within my customer-detail component, I have implemented code that achieves the desired outcome. However, I believe there might be a more reactive and observable way to approach this task. Instead of using an if statement to set this.isLoading = true;, is ...

angulartypescriptrxjsreactive-programmingrxjs5

Encountering a React error while trying to import a dependency that relies on another already listed in the package

My package.json file lists the following dependencies: "dependencies": { "@my-company-repository/componentXPTO": "19.8.5", "@my-company-repository/commonComponents": "18.0.2", "react": "16.12.0", "react-dom": "16.12.0", "react-view-mo ...

reactjsnpmdependenciescircular-dependencystealjs

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...

javascriptreactjstypescript

Leveraging GetServerSideProps for Dynamic URL Query Parameters

While working on querying the parameter in the URL within getServerSideProps, I encountered an error where ID was undefined in the DetailThemepage function. My Next.js version is V.13 and the directory structure is app/detail/[id]/page.tsx. http://loca ...

typescriptnext.jsnext.js13

React seems to have trouble working with Firebase Firestore queries

Struggling with this particular issue for the past 6 hours, I just can't seem to figure it out. My objective is to query orders based on their status using Firestore. However, whenever I try adding a `.where` clause in the function, it simply doesn&ap ...

reactjsfirebasegoogle-cloud-firestoreaxios

Issue with Ionic2 radio button selection not persisting

I'm currently working on implementing Radio Alerts within an Ionic2 application. To create a radio alert, I used the following code snippet: let alert = this.alertCtrl.create(); alert.setTitle('Select a Radio Alert'); alert.addInput({ typ ...

angulartypescriptionic2ionic3

Ways to access the npm script arguments within a ReactJS project

Is there a way for me to retrieve the values of these flags? npm run start --appenv=development --build=mobile I'm looking to obtain the values of appenv and build in my React code. ...

javascriptreactjsnpm

How can I prevent Heroku from automatically running the script with 'npm start'?

I am currently in the process of developing a server-based application that utilizes automated scripts, also known as "bots," within a cloud environment. I have set up Heroku Scheduler to execute one of these scripts automatically, as illustrated in Figure ...

javascriptnode.jsherokunpmscheduled-tasks