Question 120801 in Firebase Question posted in
An extensive official documentation can be found here.

It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production,

I am trying to integrate firebase with ReactJs like this.

Here is my code

import firebase from "firebase";



var firebaseConfig = {
  apiKey: "", // Add API Key
  databaseURL: "" // Add databaseURL
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export const db = firebase;

var firepadRef = firebase.database().ref();


export const userName = localStorage.getItem('auth_name');
const urlparams = new URLSearchParams(window.location.search);
const roomId = urlparams.get("id");

if (roomId) {
  firepadRef = firepadRef.child(roomId);
} else {
  firepadRef = firepadRef.push();
}

export default firepadRef;

And now I get this warning:

It looks like you’re using the development build of the Firebase JS
SDK. When deploying Firebase apps to production, it is advisable to
only import the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace with the name of a component – i.e. auth, database,
etc):

CommonJS Modules: const firebase = require(‘firebase/app’);
require(‘firebase/’);

ES Modules: import firebase from ‘firebase/app’; import
‘firebase/’;

Typescript: import firebase from ‘firebase

Tags:

2

Answers


  1. 0

    After a new firebase.initializeApp, (assuming you are using v9 of firebase), you need to instantiate the db differently. Check your docs. I’d write your code like this instead:

    // firebase file which you export the initialization
import firebase from "firebase";



var firebaseConfig = {
  apiKey: "", // Add API Key
  databaseURL: "" // Add databaseURL
};

// Initialize Firebase
var fire = firebase.initializeApp(firebaseConfig);
export fire.

//second js file
import firebase from ./firebase.js
import {getDatabase, ref, set} from "firebase/database";

var db = getDatabase(Firebase);

export const userName = localStorage.getItem('auth_name');
const urlparams = new URLSearchParams(window.location.search);
const roomId = urlparams.get("id");

//if you want to push to the db or something, you call the method
set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });

//more code here

    All in all check the docs one more time. and use version 9, its implementation is the best.
    https://firebase.google.com/docs/database/web/read-and-write#web-version-9_1

    Login or Signup to reply.
  2. 0

    This worked fine for me.

    import { initializeApp } from "firebase/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import { child, getDatabase, push, ref } from "firebase/database";

const firebaseConfig = {
    apiKey: "", // Add API Key
    databaseURL: "" // Add databaseURL
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);

var firepadRef = ref(db);

export const userName = prompt("What's your name?");
const urlparams = new URLSearchParams(window.location.search);
const roomId = urlparams.get("id");

if (roomId) {
    firepadRef = child(firepadRef, roomId);
} else {
    firepadRef = push(firepadRef);
    window.history.replaceState(null, "Meet", "?id=" + firepadRef.key);
}

export default firepadRef;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search