Cannot import firebase into react.js project. "Module not found: Error: Package path . is not exported from package"

user_15246631 0
Viewed 2999

I am trying to implement firebase into my react.js project. For the sake of following instructions I am currently using firebase version 7.15.5 (at least I think because both my .json files say firebase 7.15.5)so that my syntax is the same as the instruction. When I go to npm start my react project, I get the following error:

Failed to compile.

Module not found: Error: Package path . is not exported from package /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase (see exports field in /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/jasonvitalejr/react-app/grey-hackbu/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
assets by status 6.89 KiB [cached] 1 asset
assets by chunk 1.82 MiB (name: main)
  asset static/js/bundle.js 1.82 MiB [emitted] (name: main) 1 related asset
  asset main.c55928e95e4d10c4a055.hot-update.js 4.78 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 1 KiB
  asset asset-manifest.json 583 bytes [emitted]
  asset main.c55928e95e4d10c4a055.hot-update.json 442 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 1.82 MiB (1.8 MiB) = static/js/bundle.js 1.82 MiB main.c55928e95e4d10c4a055.hot-update.js 4.78 KiB 2 auxiliary assets
cached modules 1.64 MiB [cached] 243 modules
runtime modules 31.3 KiB 15 modules
./src/App.js 2.94 KiB [built] [code generated]

WARNING in src/App.js
  Line 1:27:  'useEffect' is defined but never used          no-unused-vars
  Line 4:10:  'db' is defined but never used                 no-unused-vars
  Line 8:17:  'setPosts' is assigned a value but never used  no-unused-vars

ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase (see exports field in /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/jasonvitalejr/react-app/grey-hackbu/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./src/App.js 9:0-32
 @ ./src/index.js 7:0-24 11:33-36

webpack 5.65.0 compiled with 1 error and 1 warning in 644 ms

I'm new to firebase and react so I am unsure how to interpret this. Just for reference, here is my firebase config file that I am using:

import firebase from 'firebase';


const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSyATcQBcBVJAYZbn9EfKNq6DjXtFdx25tss",
    authDomain: "grey-hackbu.firebaseapp.com",
    projectId: "grey-hackbu",
    storageBucket: "grey-hackbu.appspot.com",
    messagingSenderId: "748662363480",
    appId: "1:748662363480:web:4faf4f4fcd12e0f20d012d",
    measurementId: "G-7GDWG2D6FF"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();


export {db, auth, storage}

When I run firebase - -V it says 10.0.1 but in both of my .json files it says 7.15.5. I don't think that this is an issue because i just recently returned to version 7.15.5 and was getting the same error with the most recent version of firebase.

Does anyone have any ideas on how to fix this?

google-cloud-firestore firebase-realtime-database firebase reactjs
1 Answers

I get the same problem ,we used old version firebase with old syntax , I fix this problem by using the new Syntax of firebase ,follow this steps :

  1. npm i firebase

  2. npm i -g firebase-tools

  3. replace your code with:

    import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore/lite";

const firebaseConfig = {
  apiKey: "AIzaSyATcQBcBVJAYZbn9EfKNq6DjXtFdx25tss",
  authDomain: "grey-hackbu.firebaseapp.com",
  projectId: "grey-hackbu",
  storageBucket: "grey-hackbu.appspot.com",
  messagingSenderId: "748662363480",
  appId: "1:748662363480:web:4faf4f4fcd12e0f20d012d",
  measurementId: "G-7GDWG2D6FF",
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth();
const storage = getStorage(app);
//const provider=new GoogleAuthProvider()

export { db, auth, storage };

user_131056370
Related