IjzerenHein / firestorter

Use Google Firestore in React with zero effort, using MobX 🤘
http://firestorter.com
MIT License
378 stars 50 forks source link

Firestorter cannot get firestore #80

Closed knevagi closed 3 years ago

knevagi commented 5 years ago

I am new to using firestorter and I am getting the error that firestorter cannot get firestore while building react native app. Any help would be appreciated. I have only tried to follow the documentation on npmjs Thank you.

TheatreList.js

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  FlatList,
  Keyboard,
  TouchableHighlight
} from "react-native";
import {observer} from 'mobx-react';
import {Collection} from 'firestorter';

const todos = new Collection('Movies')
const TheatreList=observer(class TheatreList extends Component {

  render() {
    return (

        <View>
            {todos.docs.map((doc) =>(
              <MovieItem
                key={doc.id}
                doc={doc}
              />
            ))}
        </View>

    );
  }
});
 const MovieItem = observer(({doc}) => {
   const{Name,Location} = doc.data;
   return
   <div>
      <input type='text' value={Name} />
      <input type='text' value={Location} />
   </div>;
 });

 ReactDOM.render(<TheatreList />,document.getElementById('root'));

App.js

import React, { Component } from 'react';
import {View} from 'react-native';
import firebase from 'firebase';
import Router from './src/Router';
import 'firebase/firestore';
import TheatreList from './src/components/TheatreList';
import {initFirestorter, Collection} from 'firestorter';

class App extends Component {
  componentWillMount() {
    const config = {
    apiKey: 'AIzaSyDyF8h7SYE3iiYxt-ZAmdXxWu9Pd6cuvxo',
    authDomain: 'manager-31000.firebaseapp.com',
    databaseURL: 'https://manager-31000.firebaseio.com',
    projectId: 'manager-31000',
    storageBucket: 'manager-31000.appspot.com',
    messagingSenderId: '1079074827203'
    };
      if (!firebase.apps.length) {
      firebase.initializeApp(config);
      }
      initFirestorter({firebase:firebase});
}

  render() {

    return (
        <TheatreList />

    );
  }
}

export default App;
tkleisner commented 4 years ago

I had the same error in my React Native app. Try call initFirestorter (and maybe firebase.initializeApp ?) before class declaration. I think the problem is calling it in componentWillMount method.

...
import {initFirestorter, Collection} from 'firestorter';

const config = {
    apiKey: 'AIzaSyDyF8h7SYE3iiYxt-ZAmdXxWu9Pd6cuvxo',
    authDomain: 'manager-31000.firebaseapp.com',
    databaseURL: 'https://manager-31000.firebaseio.com',
    projectId: 'manager-31000',
    storageBucket: 'manager-31000.appspot.com',
    messagingSenderId: '1079074827203'
    };

 if (!firebase.apps.length) {
   firebase.initializeApp(config);
 }

initFirestorter({firebase:firebase});

class App extends Component {
...
RWOverdijk commented 4 years ago

The problem is when you export constants that are documents and/or collections from store files.

These often get initialized before firestorter does, causing all sorts of odd issues.

mattheusphilipe commented 3 years ago

The problem is when you export constants that are documents and/or collections from store files.

These often get initialized before firestorter does, causing all sorts of odd issues.

Thanks for the tip, I started using dinamyc imports in my index app files to avoid this issue. Now I just import my components after my app have finished initFirestore.