CODEWITHSUNDEEP
reactjsfirebaseimport
Vishal
Vishal

Reputation: 717

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

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.

Upvotes: 22

Views: 90530

Answers (10)

Jos
Jos

Reputation: 79

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";

Upvotes: 1

Muhammad Awais
Muhammad Awais

Reputation: 107

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

Upvotes: 0

Jay Patel
Jay Patel

Reputation: 147

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.

Upvotes: 0

k__g
k__g

Reputation: 53

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

Upvotes: 0

Salma EL BARMAKI
Salma EL BARMAKI

Reputation: 147

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

Upvotes: 7

Anaïs
Anaïs

Reputation: 31

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 !

Upvotes: 3

rubal islam
rubal islam

Reputation: 359

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

Upvotes: -1

Shukant Pal
Shukant Pal

Reputation: 730

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

Upvotes: 4

Vaibhav
Vaibhav

Reputation: 485

You need to run npm install firebase from your project folder

Upvotes: 27

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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

Upvotes: 7

Related Questions