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?

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

Issues related to the Angular Http module

When attempting to launch my app, I encountered the following error: ERROR Error: StaticInjectorError(AppModule)[ApiUserService -> HttpClient]: StaticInjectorError(Platform: core)[ApiUserService -> HttpClient]: NullInjectorError: No provide ...

Creating a web application using ASP.NET in Visual Studio Code and running it locally with npm-lite server

I'm currently working on setting up a VB ASP.NET project on my Mac using VS Code, which is a Mac-compatible version of Visual Studio. It should work seamlessly, but the trouble is that there's no local server like IIS available. After stumbling ...

How can you define types for abstract React components in Typescript?

Currently facing a challenge when it comes to typing an abstract component in Typescript, especially after having extensive experience with Flow. The code snippets below are based on Typescript 3.8.3. Here is the relevant code: const useSlot = (): [React ...

Establishing a Next.js API endpoint at the root level

I have a webpage located at URL root, which has been developed using React. Now, I am looking to create an API endpoint on the root as well. `http://localhost:3000/` > directs to the React page `http://localhost:3000/foo` > leads to the Next API end ...

What causes variation in the node_modules folder when npm install is executed repeatedly?

I have a package.json file with dependencies specified by exact versions as shown below: "dependencies": { "async": "0.9.2", "body-parser": "1.15.1", "cookie-parser": "1.4.2", "csvtojson": "0.3.21", "express": "4.1 ...

Tips for displaying only the initial 15 characters of a text value

The content extracted from a .ts file is being displayed on the home.html page. I am aiming to display only the initial 15 characters followed by 3 dots (...). Despite my efforts, the following code snippet is not functioning as expected: home.html < ...

An unusual problem encountered while working with NextJS and NextAuth

In my NextJS authentication setup, I am using a custom token provider/service as outlined in this guide. The code structure is as follows: async function refreshAccessToken(authToken: AuthToken) { try { const tokenResponse = await AuthApi.refre ...

Deeply nested .map function to update state value

The current state value const [settings, setSettings] = useContext(SettingsContext) Utilizing the .map method on the settings state {settings[categoryIndex]?.config?.map((item: ConfigItem, index: number) => ...

Leverage the version attribute within package.json within one of its scripts

Is there a way to access the version attribute of my package.json file within one of its scripts? I want to include the version number in the name of the JS bundle, instead of using a hash as an identifier. This is what I currently have: "build-js": "bro ...

The element 'fontFamily' is not recognized within the 'ThemeOptions' type in MUI theming

I'm diving into the world of React and MUI by building my own dashboard from scratch. Let's take a look at my App.tsx file: import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; i ...

What is the process for updating development dependencies using NPM?

Looking at a snippet from my package.json: { ... "devDependencies": { "gulp": "~3.8", ... }, ... } I've been trying out the following commands: gulp --version CLI version 3.8.7 Local version 3.8.6 npm update gulp - ...

The package.json file for system-wide installation of packages

Trying to perform an update on my nuclide-server has been a challenge. The command sudo npm update -g nuclide --verbose returned the following output: $ sudo npm update -g --dev nuclide --verbose npm info it worked if it ends with ok npm verb cli [ ' ...

How to troubleshoot the issue of "Error: (SystemJS) module is not defined" in Angular 2?

I am a beginner in the world of Angular2. It is known that in Angular2, there is a way to reference a file using a relative path by defining moduleId : module.id in the component meta data. However, I have tried doing it this way and keep encountering the ...

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

Failed Azure Pipeline due to the absence of the vueapp.key file during the npm run build process

I'm encountering issues while trying to build a Vue app in Azure pipelines. I lack experience with NodeJS and Vue, so I'm unsure about what it requires. My application builds and runs smoothly locally. Any guidance would be highly appreciated. I ...

Error message: In the combination of NextJs and Redux, an issue has occurred where the program is unable to access properties of null, specifically in

I am just getting started with Next and redux, but I am facing an issue. The error shown above occurs when trying to select a redux value from the store. I have attempted using raw useSelector from redux toolkit, but it still results in the same error. ...

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

Issue: The specified type '{ children: string; severity: string; sx: { width: string; }; }' is not compatible with the type 'IntrinsicAttributes & RefAttributes'. The property 'children' is missing in the type 'Intri ...

Typescript Next.js Project with Custom Link Button Type Definition

I have a project that includes a custom Button component and a NextLink wrapper. I want to merge these two components for organization purposes, but when I combine the props for each, I encounter an issue with spreading the rest in the prop destructuring s ...

"Encountered a runtime error while trying to execute the doubleClick() function using Pro

Encountering the following issue: "WebDriverError: Unable to convert: Error 404: Not found" while running a test with protractor: browser.actions().doubleClick(elem).perform(); or browser.actions().click(elem).click(elem).perform(); Uncertain of t ...