Warning: It looks like you're using the development build of the Firebase JS SDK
ReactjsFirebaseReactjs Problem Overview
I've integrated Firebase into my React.js app as such: https://firebase.google.com/docs/database/web/start
fire.js:
import firebase from 'firebase'
var config = {
apiKey: "####",
authDomain: "#",
databaseURL: "#",
projectId: "#",
storageBucket: "#",
messagingSenderId: "#"
};
var fire = firebase.initializeApp(config);
export default fire;
App.js:
import fire from './fire';
class App extends Component {
componentWillMount(){
let messagesRef = fire.database().ref('messages').orderByKey().limitToLast(100);
}
}
But now I'm getting this warning in the console:
> 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
How do I fix this warning?
I have tried (in fire.js) changing this:
import firebase from 'firebase'
To this:
import firebase from 'firebase/app'
Reactjs Solutions
Solution 1 - Reactjs
The proper way to import firebase is as such:
import firebase from 'firebase/app';
import 'firebase/database'; // If using Firebase database
import 'firebase/storage'; // If using Firebase storage
Solution 2 - Reactjs
The proper way to import firebase and getting rid of the warnings is:
Always import this way
import firebase from 'firebase/app';
Then import each sub-modules (each firebase service) as needed
import 'firebase/auth'; // for authentication
import 'firebase/storage'; // for storage
import 'firebase/database'; // for realtime database
import 'firebase/firestore'; // for cloud firestore
import 'firebase/messaging'; // for cloud messaging
import 'firebase/functions'; // for cloud functions
Solution 3 - Reactjs
The warning is rather informative and lays out exactly what you need to do. In your case, this is the line thats telling you to switch up the way you are importing your files:
> ES Modules: import firebase from 'firebase/app'; import 'firebase/';
In your fire.js
file try changing this:
import firebase from 'firebase'
To this:
import firebase from 'firebase/app'
That should clear it up!
Side note:
In my case I was using firestore
so I had an additional import that I also changed from:
import firestore from 'firebase/firestore'
To:
import 'firebase/firestore'
Solution 4 - Reactjs
Something to note:
I am using firebase only for storage, but I still needed to:
import firebase from "firebase/app"
import "firebase/storage"
import "firebase/auth"
to avoid the webpack error in the OP.
I was authenticating the user prior to accessing the storage. Although I am not using firebase as my main auth provider.
Solution 5 - Reactjs
the same to me. I solved it in this way.
import firebase from "firebase/app"
I used it in every place where I was importing Firebase in my project. This worked for me.
Of course, remember to use the services what you need in your Firebase initialization.
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/database';
import 'firebase/firestore';
import 'firebase/messaging';
import 'firebase/functions';