score:0

i think you have a bad project structure. i give you my example:

// react-create-app structure

src --|
      |-- index.js
      |-- firebaseconfig.js
      |-- firebaseapp.js
      |-- app.js
      |-- examplecomponent.js

try it.

// src/index.js

import react from 'react';
import reactdom from 'react-dom';

import app from './app';

reactdom.render(
  <react.strictmode>
    <app />
  </react.strictmode>,
  document.getelementbyid('root'),
);

your firebase app info file

// src/firebaseconfig.js
const firebaseconfig: object = {
  apikey: 'xxx',
  authdomain: 'xxx.firebaseapp.com',
  projectid: 'xxx-project',
  storagebucket: 'xxx.appspot.com',
  messagingsenderid: 'xxx',
  appid: 'xxx',
  // measurementid: 'xxx', // i don't enable google analytics for this project
};

export default firebaseconfig;

example a firebaseapp file

// src/firebaseapp.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/auth';
import firebaseconfig from './firebaseconfig'; // your firebase app config

const app = firebase.initializeapp(firebaseconfig);

export default app;

next file is app.js

// src/app.js

import react from 'react';

import { firebaseappprovider } from 'reactfire';
import firebaseapp from './firebaseapp'; 

import examplecomponent from './examplecomponent';

const app = () => {
  return (
    <firebaseappprovider firebaseapp={firebaseapp}>
      <examplecomponent />
    </firebaseappprovider>
  );
};

export default app;

component example code:

// src/examplecomponent.js

import react from 'react';

import { usefirestore } from 'reactfire';

    
const examplecomponent = () => {
    const firestore = usefirestore();
        
    console.log(firestore.collection('your_collection_name')); // working good
        
    return <>hello reactfire app</>;
};

export default examplecomponent;

Related Query

More Query from same tag