New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
devpascoe opened this Issue May 19, 2018 · 27 comments

Comments

Projects
None yet
@devpascoe
Copy link

devpascoe commented May 19, 2018

[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.

@firebase-oss-bot

This comment has been minimized.

Copy link
Collaborator

firebase-oss-bot commented May 19, 2018

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

@firebase-oss-bot

This comment has been minimized.

Copy link
Collaborator

firebase-oss-bot commented May 19, 2018

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

@mhuensch

This comment has been minimized.

Copy link

mhuensch commented May 20, 2018

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

@MacKentoch

This comment has been minimized.

Copy link

MacKentoch commented May 21, 2018

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

This comment has been minimized.

Copy link
Contributor

jshcrowthe commented May 21, 2018

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.

@jshcrowthe jshcrowthe closed this May 21, 2018

@mhuensch

This comment has been minimized.

Copy link

mhuensch commented May 21, 2018

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

This comment has been minimized.

Copy link

devpascoe commented May 21, 2018

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

This comment has been minimized.

Copy link
Contributor

jshcrowthe commented May 21, 2018

@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

This comment has been minimized.

Copy link

MacKentoch commented May 22, 2018

Thank you @jshcrowthe !

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

@Jiangtaste

This comment has been minimized.

Copy link

Jiangtaste commented May 29, 2018

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!

@ialex90

This comment has been minimized.

Copy link

ialex90 commented Jun 25, 2018

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

This comment has been minimized.

Copy link

Jiangtaste commented Jun 26, 2018

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

@ialex90

This comment has been minimized.

Copy link

ialex90 commented Jun 26, 2018

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

1x

2x

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

3x

Any other ideas please?

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

@jshcrowthe

This comment has been minimized.

Copy link
Contributor

jshcrowthe commented Jul 9, 2018

@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:

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

This comment has been minimized.

Copy link

ialex90 commented Jul 9, 2018

Thanks for taking the time and help @jshcrowthe !!

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

@dileepxdn

This comment has been minimized.

Copy link

dileepxdn commented Sep 2, 2018

@ialex90 I have solved that error by this :


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

@nickjuntilla

This comment has been minimized.

Copy link

nickjuntilla commented Oct 6, 2018

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

This comment has been minimized.

Copy link

belachkar commented Oct 20, 2018

@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

This comment has been minimized.

Copy link

nickjuntilla commented Oct 29, 2018

@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

This comment has been minimized.

Copy link

Jiangtaste commented Oct 30, 2018

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:

  1. 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 };

  1. 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();
  1. 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 };
  1. 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

This comment has been minimized.

Copy link

nickjuntilla commented Oct 30, 2018

@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

This comment has been minimized.

@nickjuntilla

This comment has been minimized.

Copy link

nickjuntilla commented Oct 30, 2018

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

This comment has been minimized.

Copy link

elnobun commented Nov 16, 2018

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.

@engineerchef

This comment has been minimized.

Copy link

engineerchef commented Nov 19, 2018

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

This comment has been minimized.

Copy link

ashutoshsenger commented Dec 20, 2018

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.
screenshot at 2018-12-19 09 22 07
screenshot at 2018-12-19 09 58 34

@jimmykane

This comment has been minimized.

Copy link

jimmykane commented Dec 26, 2018

For those who still struggle

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

ETC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment