Module not found: Can't resolve 'firebase/index'

Question

I am trying to import firebase in my react app, using the following syntax:

import firebase from 'firebase/index';

But I am facing following issue:

./src/App.js Module not found: Can't resolve 'firebase/index' in '/home/neosoft/Documents/react_projects/urup_dashboard/src'

I am not sure what is the issue, as I am a newbie to react.

UPDATE I have noticed a strange thing. The above syntax of import works fine in ubuntu 14.04. The issue is faced in ubuntu 16.04. I am not sure about other versions of ubuntu.

Chambliss

Answer 1

You need to run npm install firebase from your project folder

Occlusion

Answer 2

Try upgrading firebase back to "firebase": "4.8.0"

Follow steps below

1. Do npm uninstall firebase
2. npm cache clear
3. npm i firebase@^4.8.0 --save

Manila

My current version of firebase is 5.5.3 and firebase-tools is 5.0.0. – Chambliss

Answer 3

uninstall the firebase version that you have in package.json with npm uninstall firebase and install this version instead npm i firebase@^8.10.0

Pinkham

Answer 4

According to the Firebase documentation at npm, you have to import the entire Firebase namespace as:

import * as firebase from 'firebase';

In order to use specific services inside firebase, you must import them without a name:

import 'firebase/auth';
import 'firebase/firestore';

Note: While developing your Firebase application, you will likely get a message that you are using the development build of Firebase. In production builds, you should import firebase from firebase/app:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

See: https://www.npmjs.com/package/firebase

Withdrew

Answer 5

if you need to clear the cache after unistalling the current version of firebase

npm uninstall firebase

doing

npm clear cache

your computer might not want to do it and sends

npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

then listen and use

npm clear cache --force

and then it's ok you can do

npm i firebase@^4.8.0 --save

and you're good !

Twelfthtide

Simply updating the firebase version to 4.8.0 in package.json and re-running the npm install command works for me. Thanks! – Biafra

Are you sue about this version? zsh: no matches found: firebase@^4.8.0 – Photoplay

Answer 6

on the terminal do the followng:

yarn remove firebase
yarn add firebase

After this on firebase.js file do the following

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

Thiele

Answer 7

Check if there is firebase folder in node_modules if there is no firebase folder then

npm i firebase

if there is firebase folder then

npm uninstall firebase

then

npm i firebase

Herron

Answer 8

I had the similar issue when I used vanilla ReactJS (no typescript) and firebase version 9.1.1

I resolved it like this:

import { initializeApp } from "@firebase/app";
import { getAuth, GoogleAuthProvider } from "@firebase/auth";

In my other typescript project, I do not require @ sign in front of the library name in import statement and that's what I was missing.

Tompkins

Answer 9

if you are facing this issue try these lines
use this drill down approach .... make sure you have firebase installl if not use these lines

npm installl firebase

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

it should work ,thanks

Selfrighteous

Answer 10

go to this link https://github.com/jeescu/react-firebase

do in terminal

git clone

cd react-firebase

npm install

Open the installed directory i.e react-firebase in explorer. Open "node_modules" folder copy firebase folder and paste it in your project "node_modules" folder : NB: not a permanent solution though

Krypton