search

firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.82k stars 885 forks source link

Cant instantiate firestore from v8.2.5 to 8.3.1? #4593

Closed olivierkrener closed 3 years ago

olivierkrener commented 3 years ago

[REQUIRED] Describe your environment

Framework: Vue.js 2.6.1, Javascript (no TS), webpack 4.41.6

[REQUIRED] Describe the problem

After upgrading to v8.2.5 or up until 8.3.1 of the SDK my app cant instantiate firestore or auth anymore

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/functions";
import "firebase/analytics";

// Initialize Firebase
var config = {
    apiKey: {somevalue},
    authDomain: {somevalue},
    databaseURL: {somevalue},
    projectId: {somevalue},
    storageBucket: {somevalue},
    messagingSenderId: {somevalue},
    appId: {somevalue},
    measurementId:  {somevalue}
};
firebase.initializeApp(config)
console.log(firebase)

var functions = firebase.functions();    // Works fine
var analytics = firebase.analytics();    // Works fine
var firestore = firebase.firestore();    // throws "firestore is not a function"
var auth = firebase.auth();    // throws "auth is not a function" (if previous line is removed)

The last two lines would throw an exception that firestore or auth are not a function

And here is the output of the console.log in v8.2.10:

{__esModule: true, initializeApp: ƒ, app: ƒ, registerVersion: ƒ, setLogLevel: ƒ, …} INTERNAL: {components: Map(11), registerComponent: ƒ, removeApp: ƒ, useAsService: ƒ, createFirebaseNamespace: ƒ, …} SDK_VERSION: "8.2.9" analytics: ƒ (appArg) app: ƒ app(name) apps: (...) default: {esModule: true, initializeApp: ƒ, app: ƒ, registerVersion: ƒ, setLogLevel: ƒ, …} functions: ƒ (appArg) initializeApp: ƒ () installations: ƒ (appArg) onLog: ƒ onLog(logCallback, options) registerVersion: ƒ registerVersion(libraryKeyOrName, version, variant) setLogLevel: ƒ setLogLevel(level) esModule: true

Same output in v8.2.4:

{__esModule: true, initializeApp: ƒ, app: ƒ, registerVersion: ƒ, setLogLevel: ƒ, …} INTERNAL: Object SDK_VERSION: "8.0.1" User: ƒ Im(a,b,c) analytics: ƒ (appArg) app: ƒ app(name) apps: Array(2) auth: ƒ (appArg) default: Object firestore: ƒ (appArg) functions: ƒ (appArg) initializeApp: ƒ () installations: ƒ (appArg) messaging: ƒ (appArg) onLog: ƒ onLog(logCallback, options) registerVersion: ƒ registerVersion(libraryKeyOrName, version, variant) setLogLevel: ƒ setLogLevel(level) storage: ƒ (appArg) __esModule: true

google-oss-bot commented 3 years ago

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

retronav commented 3 years ago

@olivierkrener Check this sandbox out. v8.2.10 is definitely working. It seems there is some problem at your side. Can you provide us with some additional details(framework, JS/TS, etc.)?

paulwongx commented 3 years ago

I had the same issue when importing in ReactJS.

Solution: I updated my import to be import firebase from 'firebase' and then uninstalled and reinstalled the firebase package ^8.3.0 and then it started working.

My setup file is below for reference:

import firebase from 'firebase';
require('dotenv').config();

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECT_ID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth };
export default db;

I retested with the recommended imports below and it doesn't work:

// This does not work
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

It leads to an error: firebaseApp.firestore is not a function

retronav commented 3 years ago

@paulwongx I'm not sure if that was an typo, but this snippet from you

// This does not work
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

definitely wont work. 😅 That's because the import firebase/database is for Realtime Database, which is completely different from Firestore. If you change your imports like this:

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

It will work.

olivierkrener commented 3 years ago

@olivierkrener Check this sandbox out. v8.2.10 is definitely working. It seems there is some problem at your side. Can you provide us with some additional details(framework, JS/TS, etc.)?

Your sandbox works for me too so it is not an OS or browser issue. I added some more info in the description, my app cannot instantiate auth either, functionsand analyticsare fine.

I have also tested this version by version starting at 8.2.2 and the problem occurs from 8.2.5 and up, in 8.2.4 it still works fine.

hsubox76 commented 3 years ago

Have you tried deleting node_modules and yarn.lock or package-lock.json and doing a clean reinstall?

olivierkrener commented 3 years ago

Have you tried deleting node_modules and yarn.lock or package-lock.json and doing a clean reinstall?

It leads to the exact same issue

looptheloop88 commented 3 years ago

Hi @olivierkrener, I wasn't able to replicate this issue. Try to use the latest version (8.3.1) of the JS SDK. If the issue persists, please share a sample project (including the package.json file) that I can run locally to replicate the issue.

Here's the firebase object:

{
  __esModule: true,
  initializeApp: [Function: initializeApp],
  app: [Function: app] { App: [Function: FirebaseAppImpl] },
  registerVersion: [Function: registerVersion],
  setLogLevel: [Function: setLogLevel],
  onLog: [Function: onLog],
  apps: [Getter],
  SDK_VERSION: '8.3.1',
  INTERNAL: {
    registerComponent: [Function: registerComponent],
    removeApp: [Function: removeApp],
    components: Map(11) {
      'platform-logger' => [Component],
      'fire-core-node-version' => [Component],
      'fire-js-version' => [Component],
      'firebase-app-version' => [Component],
      'database' => [Component],
      'fire-rtdb-node-version' => [Component],
      'auth' => [Object],
      'auth-internal' => [Object],
      'fire-auth-version' => [Component],
      'firestore' => [Component],
      'fire-fst-node-version' => [Component]
    },
    useAsService: [Function: useAsService],
    createFirebaseNamespace: [Function: createFirebaseNamespace],
    extendNamespace: [Function: extendNamespace],
    createSubscribe: [Function: createSubscribe],
    ErrorFactory: [Function: ErrorFactory],
    deepExtend: [Function: deepExtend],
    node: {
      localStorage: Storage {},
      sessionStorage: Storage {},
      XMLHttpRequest: [Function (anonymous)]
    }
  },
  default: [Circular *1],
  database: [Function: serviceNamespace] {
    Reference: [Function: Reference],
    Query: [Function: Query] {
      validateQueryEndpoints_: [Function (anonymous)],
      validateLimit_: [Function (anonymous)],
      getCancelAndContextArgs_: [Function (anonymous)]
    },
    Database: [Function: Database] { ServerValue: [Object] },
    DataSnapshot: [Function: DataSnapshot],
    enableLogging: [Function: enableLogging],
    INTERNAL: [Object: null prototype] {
      forceLongPolling: [Function: forceLongPolling],
      forceWebSockets: [Function: forceWebSockets],
      isWebSocketsAvailable: [Function: isWebSocketsAvailable],
      setSecurityDebugCallback: [Function: setSecurityDebugCallback],
      stats: [Function: stats],
      statsIncrementCounter: [Function: statsIncrementCounter],
      dataUpdateCount: [Function: dataUpdateCount],
      interceptServerData: [Function: interceptServerData],
      initStandalone: [Function: initStandalone]
    },
    ServerValue: { TIMESTAMP: [Object], increment: [Function: increment] },
    TEST_ACCESS: [Object: null prototype] {
      DataConnection: [Function],
      RealTimeConnection: [Function: Connection],
      hijackHash: [Function: hijackHash],
      ConnectionTarget: [Function: RepoInfo],
      queryIdentifier: [Function: queryIdentifier],
      forceRestClient: [Function: forceRestClient]
    }
  },
  auth: [Function: serviceNamespace] {
    ActionCodeInfo: { Operation: [Object] },
    Auth: [Function: En] { ab: [Uc], Persistence: [Object] },
    AuthCredential: [Function: Bg] { fromJSON: [Function: d] },
    Error: [Function: t] { ab: {} },
    EmailAuthProvider: [Function: d] {
      PROVIDER_ID: 'password',
      EMAIL_LINK_SIGN_IN_METHOD: 'emailLink',
      EMAIL_PASSWORD_SIGN_IN_METHOD: 'password',
      credential: [Function: d],
      credentialWithLink: [Function: d]
    },
    FacebookAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'facebook.com',
      FACEBOOK_SIGN_IN_METHOD: 'facebook.com',
      credential: [Function: d]
    },
    GithubAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'github.com',
      GITHUB_SIGN_IN_METHOD: 'github.com',
      credential: [Function: d]
    },
    GoogleAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'google.com',
      GOOGLE_SIGN_IN_METHOD: 'google.com',
      credential: [Function: d]
    },
    TwitterAuthProvider: [Function: d] {
      ab: [Object],
      PROVIDER_ID: 'twitter.com',
      TWITTER_SIGN_IN_METHOD: 'twitter.com',
      credential: [Function: d]
    },
    OAuthProvider: [Function: d] { ab: [Object] },
    SAMLAuthProvider: [Function: d] { ab: [Object] },
    PhoneAuthProvider: [Function: d] {
      PROVIDER_ID: 'phone',
      PHONE_SIGN_IN_METHOD: 'phone',
      credential: [Function: d]
    },
    RecaptchaVerifier: [Function: d] { ab: [Object] },
    ActionCodeURL: [Function: d] { parseLink: [Function: d] },
    PhoneMultiFactorGenerator: [Function: d] { FACTOR_ID: 'phone', assertion: [Function: d] }
  },
  User: [Function: Im] {
    ab: Uc {
      constructor: [Function],
      closure_listenable_710859: true,
      addEventListener: [Function (anonymous)],
      removeEventListener: [Function (anonymous)],
      dispatchEvent: [Function (anonymous)],
      Da: [Function (anonymous)]
    }
  },
  firestore: [Function: serviceNamespace] {
    Firestore: [Function: Firestore],
    GeoPoint: [Function: GeoPoint],
    Timestamp: [Function: Timestamp] {
      now: [Function (anonymous)],
      fromDate: [Function (anonymous)],
      fromMillis: [Function (anonymous)]
    },
    Blob: [Function: Blob] {
      fromBase64String: [Function (anonymous)],
      fromUint8Array: [Function (anonymous)]
    },
    Transaction: [Function: Transaction$3],
    WriteBatch: [Function: WriteBatch$1],
    DocumentReference: [Function: DocumentReference$1] {
      forPath: [Function (anonymous)],
      forKey: [Function (anonymous)]
    },
    DocumentSnapshot: [Function: DocumentSnapshot$2],
    Query: [Function: Query$1],
    QueryDocumentSnapshot: [Function: QueryDocumentSnapshot$2],
    QuerySnapshot: [Function: QuerySnapshot$1],
    CollectionReference: [Function: CollectionReference$1],
    FieldPath: [Function: FieldPath] { documentId: [Function (anonymous)] },
    FieldValue: [Function: FieldValue] {
      serverTimestamp: [Function (anonymous)],
      delete: [Function (anonymous)],
      arrayUnion: [Function (anonymous)],
      arrayRemove: [Function (anonymous)],
      increment: [Function (anonymous)]
    },
    setLogLevel: [Function: setLogLevel$1],
    CACHE_SIZE_UNLIMITED: -1
  }
}
olivierkrener commented 3 years ago

Hi @olivierkrener, I wasn't able to replicate this issue. Try to use the latest version (8.3.1) of the JS SDK. If the issue persists, please share a sample project (including the package.json file) that I can run locally to replicate the issue.

Here's the firebase object:

{
  __esModule: true,
  initializeApp: [Function: initializeApp],
  app: [Function: app] { App: [Function: FirebaseAppImpl] },
  registerVersion: [Function: registerVersion],
  setLogLevel: [Function: setLogLevel],
  onLog: [Function: onLog],
  apps: [Getter],
  SDK_VERSION: '8.3.1',
  INTERNAL: {
    registerComponent: [Function: registerComponent],
    removeApp: [Function: removeApp],
    components: Map(11) {
      'platform-logger' => [Component],
      'fire-core-node-version' => [Component],
      'fire-js-version' => [Component],
      'firebase-app-version' => [Component],
      'database' => [Component],
      'fire-rtdb-node-version' => [Component],
      'auth' => [Object],
      'auth-internal' => [Object],
      'fire-auth-version' => [Component],
      'firestore' => [Component],
      'fire-fst-node-version' => [Component]
    },
    useAsService: [Function: useAsService],
    createFirebaseNamespace: [Function: createFirebaseNamespace],
    extendNamespace: [Function: extendNamespace],
    createSubscribe: [Function: createSubscribe],
    ErrorFactory: [Function: ErrorFactory],
    deepExtend: [Function: deepExtend],
    node: {
      localStorage: Storage {},
      sessionStorage: Storage {},
      XMLHttpRequest: [Function (anonymous)]
    }
  },
  default: [Circular *1],
  database: [Function: serviceNamespace] {
    Reference: [Function: Reference],
    Query: [Function: Query] {
      validateQueryEndpoints_: [Function (anonymous)],
      validateLimit_: [Function (anonymous)],
      getCancelAndContextArgs_: [Function (anonymous)]
    },
    Database: [Function: Database] { ServerValue: [Object] },
    DataSnapshot: [Function: DataSnapshot],
    enableLogging: [Function: enableLogging],
    INTERNAL: [Object: null prototype] {
      forceLongPolling: [Function: forceLongPolling],
      forceWebSockets: [Function: forceWebSockets],
      isWebSocketsAvailable: [Function: isWebSocketsAvailable],
      setSecurityDebugCallback: [Function: setSecurityDebugCallback],
      stats: [Function: stats],
      statsIncrementCounter: [Function: statsIncrementCounter],
      dataUpdateCount: [Function: dataUpdateCount],
      interceptServerData: [Function: interceptServerData],
      initStandalone: [Function: initStandalone]
    },
    ServerValue: { TIMESTAMP: [Object], increment: [Function: increment] },
    TEST_ACCESS: [Object: null prototype] {
      DataConnection: [Function],
      RealTimeConnection: [Function: Connection],
      hijackHash: [Function: hijackHash],
      ConnectionTarget: [Function: RepoInfo],
      queryIdentifier: [Function: queryIdentifier],
      forceRestClient: [Function: forceRestClient]
    }
  },
  auth: [Function: serviceNamespace] {
    ActionCodeInfo: { Operation: [Object] },
    Auth: [Function: En] { ab: [Uc], Persistence: [Object] },
    AuthCredential: [Function: Bg] { fromJSON: [Function: d] },
    Error: [Function: t] { ab: {} },
    EmailAuthProvider: [Function: d] {
      PROVIDER_ID: 'password',
      EMAIL_LINK_SIGN_IN_METHOD: 'emailLink',
      EMAIL_PASSWORD_SIGN_IN_METHOD: 'password',
      credential: [Function: d],
      credentialWithLink: [Function: d]
    },
    FacebookAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'facebook.com',
      FACEBOOK_SIGN_IN_METHOD: 'facebook.com',
      credential: [Function: d]
    },
    GithubAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'github.com',
      GITHUB_SIGN_IN_METHOD: 'github.com',
      credential: [Function: d]
    },
    GoogleAuthProvider: [Function: d] {
      ab: [Ng],
      PROVIDER_ID: 'google.com',
      GOOGLE_SIGN_IN_METHOD: 'google.com',
      credential: [Function: d]
    },
    TwitterAuthProvider: [Function: d] {
      ab: [Object],
      PROVIDER_ID: 'twitter.com',
      TWITTER_SIGN_IN_METHOD: 'twitter.com',
      credential: [Function: d]
    },
    OAuthProvider: [Function: d] { ab: [Object] },
    SAMLAuthProvider: [Function: d] { ab: [Object] },
    PhoneAuthProvider: [Function: d] {
      PROVIDER_ID: 'phone',
      PHONE_SIGN_IN_METHOD: 'phone',
      credential: [Function: d]
    },
    RecaptchaVerifier: [Function: d] { ab: [Object] },
    ActionCodeURL: [Function: d] { parseLink: [Function: d] },
    PhoneMultiFactorGenerator: [Function: d] { FACTOR_ID: 'phone', assertion: [Function: d] }
  },
  User: [Function: Im] {
    ab: Uc {
      constructor: [Function],
      closure_listenable_710859: true,
      addEventListener: [Function (anonymous)],
      removeEventListener: [Function (anonymous)],
      dispatchEvent: [Function (anonymous)],
      Da: [Function (anonymous)]
    }
  },
  firestore: [Function: serviceNamespace] {
    Firestore: [Function: Firestore],
    GeoPoint: [Function: GeoPoint],
    Timestamp: [Function: Timestamp] {
      now: [Function (anonymous)],
      fromDate: [Function (anonymous)],
      fromMillis: [Function (anonymous)]
    },
    Blob: [Function: Blob] {
      fromBase64String: [Function (anonymous)],
      fromUint8Array: [Function (anonymous)]
    },
    Transaction: [Function: Transaction$3],
    WriteBatch: [Function: WriteBatch$1],
    DocumentReference: [Function: DocumentReference$1] {
      forPath: [Function (anonymous)],
      forKey: [Function (anonymous)]
    },
    DocumentSnapshot: [Function: DocumentSnapshot$2],
    Query: [Function: Query$1],
    QueryDocumentSnapshot: [Function: QueryDocumentSnapshot$2],
    QuerySnapshot: [Function: QuerySnapshot$1],
    CollectionReference: [Function: CollectionReference$1],
    FieldPath: [Function: FieldPath] { documentId: [Function (anonymous)] },
    FieldValue: [Function: FieldValue] {
      serverTimestamp: [Function (anonymous)],
      delete: [Function (anonymous)],
      arrayUnion: [Function (anonymous)],
      arrayRemove: [Function (anonymous)],
      increment: [Function (anonymous)]
    },
    setLogLevel: [Function: setLogLevel$1],
    CACHE_SIZE_UNLIMITED: -1
  }
}

Same issue with v8.3.1. I will see how I can give you a sample project with the issue,

looptheloop88 commented 3 years ago

Sorry to hear that you're still experiencing the issue with the SDK version 8.3.1. If I can replicate the issue, I can have a better look into it. I will be waiting for the sample project.

olivierkrener commented 3 years ago

So while trying to reproduce the issue I cleaned my dependencies and removed/updated some of them. The issue disappeared :). So it must have been something wrong in my setup and the issue can be closed. Sorry for the wrong alert!