Although specifying packages i'm still receiving "It looks like you're using the development build of the Firebase JS SDK" #848

devpascoe · 2018-05-19T00:06:35Z

[REQUIRED] Describe your environment
Operating System version: macOs 10.13.4 and also when deployed to Firebase Hosting
Firebase SDK version: 5.0.3
Firebase Product: app, firestore, messaging (but also occurs when just implementing app)
[REQUIRED] Describe the problem
Receive browser console warning of
"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):"

npm install firebase
then in code:
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/messaging'

It is part of a Vuejs project but that shouldn't affect anything.

Have also tried deleting node_modules folder and npm install again. Also tried npm installing the individual modules eg, npm install @firebase/app
all had same issue showing the console warning.

google-oss-bot · 2018-05-19T00:06:37Z

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

google-oss-bot · 2018-05-19T00:06:37Z

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

mhuensch · 2018-05-20T16:16:15Z

I'm having the same issue. I'm also using Firebase in a Vuejs project.

MacKentoch · 2018-05-21T19:34:47Z

Same here "firebase": "5.0.1" in a React bundled by webpack.

There is something wrong.

Documentation does not talk about:

import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

This is not super straight forward to guess that 🤨

jshcrowthe · 2018-05-21T19:58:18Z

Hey there all appreciate the issue, but I still have no repro that I have been able to verify.

I tried the following and all worked as intended (i.e. no warning message):

Get Firebase from NPM

$ npm install firebase

Add Firebase Components to File

I did this 3 times:

Webpack 4

I created a file containing the following JS and included it in my app:

import firebase from 'firebase/app';
import 'firebase/app';
import 'firebase/firestore';

console.log(firebase);

I then compiled this file using webpack 4 (in production mode).

Webpack 3

I took the same file above and supplied a barebones webpack config that I then ran through webpack 3. The config is below:

const { resolve } = require('path');

module.exports = {
  entry: resolve(__dirname, 'src/index.js'),
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

Vue CLI

I then took a default Vue application and npm installed Firebase in the project. Added the lines from the sample file above to the main.js and compiled.

Results

In all cases, things worked as expected. No warning message, and minimal app size for what I included.

I would recommend looking through your applications to see where you are referencing firebase and see if you didn't accidentally include the big bundle. I'd suspect that is the case. If you can reproduce the issue in a small sample project send me a gist or a git repo I can look at to triage the error and we will get it fixed.

@MacKentoch we can definitely work on improving our documentation here. I will try and get something figured out to help ASAP.

mhuensch · 2018-05-21T23:32:57Z

I can confirm that centralizing the calls to firebase and doing the following fixed my problem ...

import firebase from 'firebase/app'
import 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

... so it was probably an errant import that wasn't updated.

devpascoe · 2018-05-21T23:35:08Z

Thanks for prompting me to search through the project. Elsewhere in another file I was referencing firebase mega. Fixed up that reference and all good 👍

jshcrowthe · 2018-05-21T23:39:23Z

@run00 and @devpascoe thanks for the due diligence here guys!

And best of all you just shaved off a bunch of JS weight for your users 👍 wins all around!

MacKentoch · 2018-05-22T15:02:30Z

Thank you @jshcrowthe !

Really appreciate your help and efforts (not easy task to make firebase clear it is such a huge library)!

jiangtaste · 2018-05-29T03:12:55Z

Thanks you @jshcrowthe.

I'm use firebase for my vuejs projects, import firebase into main.js like this:

import firebase from 'firebase/app'
import 'firebase/<package>'

Always remember import firebase into your modules like this (IMPORTANT):

import firebase from 'firebase/app'

DON'T import like this:

import firebase from 'firebase'

DONE. Warning is gone!

alejandrocoding · 2018-06-25T23:29:48Z

Hi folks! I know the issue is closed, I don't want to open it cause I am not really sure if I should. This is a really small example as a stackblitz to share with you the problem I am facing when importing messaging service. I am getting the warning "It looks like you're using the development build of the Firebase JS SDK...." - Any ideas? Thanks!

jiangtaste · 2018-06-26T01:11:06Z

Try this:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/message';

Use the firestore & message like this:

firestore:
firebase.firestore.xxxxx

message:
firebase.message.xxx

alejandrocoding · 2018-06-26T08:21:31Z

Thanks @jiangtaste but it seems that's not working for me. See the issues:

Using "firebase": "5.1.0" as in the stackblitz up here.

Any other ideas please?

Ref: firebase/firebase-js-sdk#848

jshcrowthe · 2018-07-09T17:45:43Z

@ialex90 I took a look at your stackblitz and noticed just a couple things wrong: I corrected them here:

https://stackblitz.com/edit/angular-firebase-messaging-import-vamh9n?file=src/app/app.component.ts

Main issues were:

You can't import firestore and messaging from the firebase/app package. You can only get the firebase namespace.
It is firebase/messaging not firebase/message

alejandrocoding · 2018-07-09T21:50:15Z

Thanks for taking the time and help @jshcrowthe !!

Ref: firebase/firebase-js-sdk#848

idileepd · 2018-09-02T04:47:40Z

@ialex90 I have solved that error by this :

import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/messaging';

nickjuntilla · 2018-10-06T05:13:39Z

I still get this message. I have my firebase initialization in one file like this:

import * as firebase from 'firebase/app';
import 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

// Initialize Firebase
const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***,"
    projectId: "***,"
    storageBucket: "***",
    messagingSenderId: "***"

};

firebase.initializeApp(firebaseConfig);

export default firebase

Then I import it into other files like this:

import firebase from '../../config/firebase';

What am I doing wrong?

belachkar · 2018-10-20T01:46:15Z

@NickChittle

1st

In the app.component

import * as firebase from 'firebase/app';

// Initialize Firebase
const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***,"
    projectId: "***,"
    storageBucket: "***",
    messagingSenderId: "***"
};
firebase.initializeApp(firebaseConfig);

2nd

In the other files or services you import the 'firebase/app', and the other packages you need, like this :

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

3rd

You use it like this for the authentication, Ex

newUser(email: string, password: string) {
  return new Promise((resolve, reject) => {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(() => resolve())
      .catch(err => reject(console.log(err.message)));
  });
}

I hope it help 😄

nickjuntilla · 2018-10-29T22:24:18Z

@belachkar This still does not work. I did exactly as you said and looked for any instance of importing firebase instead of firebase/app. I always use firebase/app and auth and firestore after that. I still get the message.

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 CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

(anonymous) @ firebase.js:1
(anonymous) @ firebase.js:1
(anonymous) @ firebase.js:1

Does this have something to do with using npm install firebase command? Do we npm install the packages separately?

jiangtaste · 2018-10-30T02:35:49Z

DON'T:
import * as firebase from 'firebase/app"

'*' means import everything from 'firebase/app', that's why you got the warning "It looks like you're using the development balabala..."

JUST IMPORT 'firebase':
import firebase from 'firebase/app'

I will show you my project's struct with firebase:

In /src/firebase/firebase.js, initialize firebase and export firebase package which we want to using in our App.

// 1. modifiy the config with your firebase project's config (includs prodConfig & devCofnig)

// IMPORTANT just import firebase
import firebase from "firebase/app"; 

// import package
import "firebase/auth";
import "firebase/firestore";

const prodConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_APP_NAME.firebaseapp.com",
  databaseURL: "https://YOUR_APP_NAME.firebaseio.com",
  projectId: "YOUR_APP_NAME",
  storageBucket: "YOUR_APP_NAME.appspot.com",
  messagingSenderId: "YOUR_MESSAGE_SENDER_ID"
};

const devConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_APP_NAME.firebaseapp.com",
  databaseURL: "https://YOUR_APP_NAME.firebaseio.com",
  projectId: "YOUR_APP_NAME",
  storageBucket: "YOUR_APP_NAME.appspot.com",
  messagingSenderId: "YOUR_MESSAGE_SENDER_ID"
};

const config = process.env.NODE_ENV === "production" ? prodConfig : devConfig;

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

const auth = firebase.auth();
const db = firebase.firestore();
const settings = { /* your settings... */ timestampsInSnapshots: true };
db.settings(settings);

export { firebase, auth, db };

In /src/firebase/auth.js, export your own functions instead, should not export firebase's package & functions direct. Keep you code more security.

import { firebase, auth } from "./firebase";

// Sign up with email
export const doCreateUserWithEmailAndPassword = (email, password) =>
  auth.createUserWithEmailAndPassword(email, password);

// Sign in with email
export const doSignInWithEmailAndPassword = (email, password) =>
  auth.signInWithEmailAndPassword(email, password);

// Sign out
export const doSignOut = () => auth.signOut();

In /src/firebase/index.js. This is more conversation for other modules to import your own functions.

import { firebase } from "./firebase";
import * as auth from "./auth";

export { firebase, auth };

use your own auth functions In /src/components/Auth.js

// import you own package from '/src/firebase/index.js'
import { firebase, auth } from '../firebase' 

// use firebase, which imported from 'firebase/app'
firebase.auth.xxxxxx
// use auth
auth.doCreateUserWithEmailAndPassword(email, password)

nickjuntilla · 2018-10-30T04:26:06Z

@jiangtaste This is still not working for me. Is there some other guide somewhere about how to do this? It doesn't make sent to do

import "firebase/auth";

Why would you do that? Shouldn't it be

import {auth} from "firebase/auth";

or something like that? Why can you import firebase/auth without specifying what you are importing. Why is it that importing "firebase/auth" allows firebase.auth to be used?

This is still not working.

jiangtaste · 2018-10-30T05:53:10Z

You may check some samples from firebase team.

https://firebase.google.com/docs/samples/
https://github.com/firebase/friendlypix-web/blob/master/src/FirebaseHelper.js

nickjuntilla · 2018-10-30T19:33:33Z

It's still not working. This is my firebase initialization file:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
// Initialize Firebase
const firebaseConfig = {
    apiKey: "***",
    authDomain: "***,"
    databaseURL: "***,"
    projectId: "***,"
    storageBucket: "*,**"
    messagingSenderId: "***"

};

firebase.initializeApp(firebaseConfig);

export default firebase

Then when I import that into another file and us it then it looks like this:

import firebase from '../config/firebase';

  loadMessages(callback) {
    this.messagesRef = firebase.database().ref('messages');
    this.messagesRef.off();
    const onReceive = (data) => {
      const message = data.val();
      callback({
        _id: data.key,
        text: message.text,
        createdAt: new Date(message.createdAt),
        user: {
          _id: message.user._id,
          name: message.user.name,
        },
      });
    };
    this.messagesRef.limitToLast(20).on('child_added', onReceive);
  }

I'm using "firebase": "^5.5.6",

elnobun · 2018-11-16T12:16:11Z

Hey @nickjuntilla, try configuring your code like so:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';

// Initialize Firebase
const firebaseConfig = {
    apiKey: "***",
    authDomain: "***,"
    databaseURL: "***,"
    projectId: "***,"
    storageBucket: "*,**"
    messagingSenderId: "***"

};

const firebaseApp = firebase.initializeApp(firebaseConfig);
firebaseApp.firestore().settings({ timestampsInSnapshots: true });

export default firebaseApp.firestore();

Add the firebaseApp.firestore().settings({ timestampsInSnapshots: true }) as shown, and see what happens.

ghost · 2018-11-19T13:27:24Z

Try to add this line below;

<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase-app.js"></script>

It works on me successfully

ashutoshsenger · 2018-12-20T13:02:18Z

hey guys,
i'm deploying my angular 6 app on heroku and in which i'm also using firebase auth. service.I am deploying this after installing universal-toolkit for making my angular app SEO freindly. But i'm getting this warning again and again and nothing worked for me till now.

jimmykane · 2018-12-26T16:21:43Z

For those who still struggle

import {auth, User} from 'firebase/app';

ETC

machester4 · 2019-03-04T14:21:34Z

with Firestore I'm using it this way

import { apps, initializeApp, firestore } from "firebase/app";
import "firebase/app";
import "firebase/firestore";

(function() {
  const config = {
    apiKey: "xxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxx",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxx"
  };

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

export default firestore();

Alessandroinfo · 2019-07-16T12:48:57Z

I'am the only one that i'am doing this?
import {firestore} from 'firebase/app';

google-oss-bot added the needs-triage label May 19, 2018

jshcrowthe closed this as completed May 21, 2018

kujyp added a commit to OrangeTen/TodayILearned that referenced this issue Jul 7, 2018

Fix app to only import the auth firebase component

a3816bd

Ref: firebase/firebase-js-sdk#848

kujyp added a commit to OrangeTen/TodayILearned that referenced this issue Jul 14, 2018

Fix app to only import the auth firebase component

81832c5

Ref: firebase/firebase-js-sdk#848

This was referenced Oct 7, 2018

[3.0.0] JavaScript heap out of memory ionic-team/ionic-app-scripts#1247

Closed

4.13.0 & 4.13.1 JavaScript heap out of memory on prod build #714

Closed

capi1O mentioned this issue Apr 28, 2019

warning thrown by webpack due to incorrect firebase imports benwinding/react-admin-firebase#15

Closed

firebase locked and limited conversation to collaborators Oct 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Although specifying packages i'm still receiving "It looks like you're using the development build of the Firebase JS SDK" #848

Although specifying packages i'm still receiving "It looks like you're using the development build of the Firebase JS SDK" #848

devpascoe commented May 19, 2018

google-oss-bot commented May 19, 2018

google-oss-bot commented May 19, 2018

mhuensch commented May 20, 2018

MacKentoch commented May 21, 2018

jshcrowthe commented May 21, 2018 •

edited

Loading

mhuensch commented May 21, 2018

devpascoe commented May 21, 2018

jshcrowthe commented May 21, 2018

MacKentoch commented May 22, 2018

jiangtaste commented May 29, 2018 •

edited

Loading

alejandrocoding commented Jun 25, 2018 •

edited

Loading

jiangtaste commented Jun 26, 2018

alejandrocoding commented Jun 26, 2018

jshcrowthe commented Jul 9, 2018

alejandrocoding commented Jul 9, 2018

idileepd commented Sep 2, 2018

nickjuntilla commented Oct 6, 2018 •

edited

Loading

belachkar commented Oct 20, 2018

nickjuntilla commented Oct 29, 2018 •

edited

Loading

jiangtaste commented Oct 30, 2018

nickjuntilla commented Oct 30, 2018 •

edited

Loading

jiangtaste commented Oct 30, 2018

nickjuntilla commented Oct 30, 2018

elnobun commented Nov 16, 2018 •

edited

Loading

ghost commented Nov 19, 2018

ashutoshsenger commented Dec 20, 2018

jimmykane commented Dec 26, 2018

machester4 commented Mar 4, 2019

Alessandroinfo commented Jul 16, 2019

Although specifying packages i'm still receiving "It looks like you're using the development build of the Firebase JS SDK" #848

Although specifying packages i'm still receiving "It looks like you're using the development build of the Firebase JS SDK" #848

Comments

devpascoe commented May 19, 2018

google-oss-bot commented May 19, 2018

google-oss-bot commented May 19, 2018

mhuensch commented May 20, 2018

MacKentoch commented May 21, 2018

jshcrowthe commented May 21, 2018 • edited Loading

Get Firebase from NPM

Add Firebase Components to File

Webpack 4

Webpack 3

Vue CLI

Results

mhuensch commented May 21, 2018

devpascoe commented May 21, 2018

jshcrowthe commented May 21, 2018

MacKentoch commented May 22, 2018

jiangtaste commented May 29, 2018 • edited Loading

alejandrocoding commented Jun 25, 2018 • edited Loading

jiangtaste commented Jun 26, 2018

alejandrocoding commented Jun 26, 2018

jshcrowthe commented Jul 9, 2018

alejandrocoding commented Jul 9, 2018

idileepd commented Sep 2, 2018

nickjuntilla commented Oct 6, 2018 • edited Loading

belachkar commented Oct 20, 2018

1st

2nd

3rd

nickjuntilla commented Oct 29, 2018 • edited Loading

jiangtaste commented Oct 30, 2018

nickjuntilla commented Oct 30, 2018 • edited Loading

jiangtaste commented Oct 30, 2018

nickjuntilla commented Oct 30, 2018

elnobun commented Nov 16, 2018 • edited Loading

ghost commented Nov 19, 2018

ashutoshsenger commented Dec 20, 2018

jimmykane commented Dec 26, 2018

machester4 commented Mar 4, 2019

Alessandroinfo commented Jul 16, 2019

jshcrowthe commented May 21, 2018 •

edited

Loading

jiangtaste commented May 29, 2018 •

edited

Loading

alejandrocoding commented Jun 25, 2018 •

edited

Loading

nickjuntilla commented Oct 6, 2018 •

edited

Loading

nickjuntilla commented Oct 29, 2018 •

edited

Loading

nickjuntilla commented Oct 30, 2018 •

edited

Loading

elnobun commented Nov 16, 2018 •

edited

Loading