I can't get Firebase to work on my React project

Question

I am trying to get firebase to work on my React project (using Webpack v3), but I am having some issues.

I added "firebase": "^4.10.1" to my package.json and in a firebase.js file I added this:

import * as firebase from 'firebase';

const config = {
    apiKey: "API_KEY",
    authDomain: "DOMAIN",
    databaseURL: "DATA_URL",
    projectId: "ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "SENDER_ID"
};

firebase.initializeApp(config);

firebase.database().ref().set({
    message: 'Connection Successful!'
});

On my app.js I imported that firebase.js file. import './firebase/firebase';

If I am not mistaking I am supposed to get the "Connection Successful!" message over in my database, but it's not working.

Instead I get a console error. I looked around online and found a few people with similar errors saying that adding:

node: {
console: true,
fs: 'empty',
child_process: 'empty',
net: 'empty',
tls: 'empty',
dgram: 'empty',
dns: 'empty',
}

to my webpack.config.json would fix it. I tried it and id didn't really work.

I didn't get those errors any more, but instead I get Uncaught TypeError: util.inherits is not a function (full error here). I kept looking and found this on the firebase documentation where they use var firebase = require("firebase/app"); instead of import. I tried it and still didn't work.

I've tried to yarn add util, but to no avail.

Any idea why this is happening and /or how to fix it? Thanks.

score 0 · Answer 1 · answered Feb 25 '18 at 10:33

I use Firebase in React this way:

import firebase from 'firebase'
var config = {
    ...
};
var fire = firebase.initializeApp(config);
fire.database().ref()...

import firebase and not import * as firebase, don't know what Firebase module do export, but maybe this change the things;
I init a variabile to which I assign the result of Firebase initialization (var fire = firebase.initalize...), then I use that to make calls to db, storage and whatever.

To me, it works flawlessly, don't know if it could be due to different versions or if it's just the code.

Thanks for the reply. I tried your `import`, but didn't work for me. I ended up getting `firebase@4.2.0` and using the `require` method to get it to work. — lokilindo, Feb 25 '18 at 10:52

I can't get Firebase to work on my React project

1 Answers1