CODEWITHSUNDEEP
reactjsfirebasereactfire
Mel
Mel

Reputation: 2715

Reactfire - getting started

I found this youtube video showing how to get started with reactfire.

I'm trying to configure it so that I can use react fire but am running into webpack issues. I have found this post, which suggests there is a problem with ES6 and reactfire and suggests using unstable_createRoot instead of following the docs.

Has anyone figured out how to get started with react fire?

When I try and use the guide to getting started, i get an error that says:

TypeError: Object(...) is not a function

Here is my index.js

import React, { Component } from 'react';

// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom';
import { FirebaseAppProvider, 
    useFirestoreDocData,
    useFirestore,
    SuspenseWithPerf } from 'reactfire';

import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';


const devConfig = {
    apiKey: process.env.REACT_APP_DEV_API_KEY,
    authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
    projectId: process.env.REACT_APP_DEV_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_DEV_APP_ID

  };


  const prodConfig = {
    apiKey: process.env.REACT_APP_PROD_API_KEY,
    authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
    projectId: process.env.REACT_APP_PROD_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_PROD_APP_ID
  };


  const firebaseConfig =
    process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


    function App() {
        return (
          <FirebaseAppProvider firebaseConfig={firebaseConfig}>
            <h1>test</h1>
            <SuspenseWithPerf
              fallback={<p>loading burrito status...</p>}
              traceId={"load-burrito-status"}
            >
              <p>taskf</p>
            </SuspenseWithPerf>
          </FirebaseAppProvider>
        );
      }

createRoot(document.getElementById("root")).render(<App />);

The stackblitz example has a package.json file with the experimental versions of react - although these aren't specified as requirements in the documentation or the demo video (and it notes that it should be stable without them).

Is there a way to use reactfire without experimental mode?

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

Upvotes: 0

Views: 542

Answers (1)

Mel
Mel

Reputation: 2715

For others looking to use this, it does say that it is for use in experimental mode - but it also says it is meant to be stable.

It isn't stable yet.

Google's firebase team says:

No timeline, sorry. We’ll mark it as stable once concurrent mode is available in stable builds of React.

Upvotes: 1

Related Questions