Adding firebase to Cocos Creator 3.x

VGFP · June 25, 2021, 3:58pm

Hi,
I am trying to add firebase to my Cocos Creator 3.2 project. I’ve downloaded npm firebase (in project folder) using:

npm install --save firebase

and added to tsconfig:

 "compilerOptions": {
     "allowSyntheticDefaultImports": true, // needs to be turned on
 }

but when I try to import the library in script:

import firebase from 'firebase/app';

import { _decorator, Component, Event, Node, Button, EventHandler } from 'cc';
const { ccclass, property } = _decorator;

// in real example I am using the values form my registered app
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
}; 

const Firebase = firebase.initializeApp(firebaseConfig);

const Providers = {
    google: new firebase.auth.GoogleAuthProvider(),
    facebook: new firebase.auth.FacebookAuthProvider(),
};

const auth = firebase.auth();

@ccclass('MainScript')
export class MainScript extends Component {
    @property(Button)
     button: Button | null = null;
     onLoad () {
         this.button.node.on(Button.EventType.CLICK, this.callback, this);
     }

     callback (button: Button) {
         // Note that events registered this way cannot pass customEventData
         console.log(firebase);
     }
}

I get an error:

Failed to resolve firebase/app from file:///D:/Game%20Assets/Cocos/FirebaseProject/assets/Scripts/mainScript.ts, treat it as external dependency. 
Which is caused by: Error: Directory import is not supported

Firebase npm library supports TypeScript (it contains .d.ts files). I want to use firebase in web game not iOS or Android app so SDKbox is no use for me.

Does anyone knows how to properly add firebase to cocos creator?

VGFP · June 27, 2021, 11:21pm

I was able to init firebase app with method shown in this thread: Problem adding Firebase to Creator 3.0 - Cocos Creator - Cocos Forums (cocos2d-x.org)
But there is still problem with adding other functions (like authentification).
My code:

import { firebaseConfig } from "./Config";
import { _decorator, Component, Node, Button, Label } from 'cc';
import firebase from 'firebase/firebase-app.js';
// import '@firebase/auth'; <- does not work
import auth from 'firebase/firebase-auth.js' // does not work either 
const { ccclass, property } = _decorator;

const Firebase = firebase.initializeApp(firebaseConfig);

@ccclass('LoginScript')
export class LoginScript extends Component {
    @property(Button)
     signInButton: Button | null = null;

    @property(Button)
     signOutButton: Button | null = null;
    
     onLoad () {
         this.signInButton.node.on(Button.EventType.CLICK, this.signInCallback, this);
         this.signOutButton.node.on(Button.EventType.CLICK, this.signOutCallback, this);
     }
     signInCallback (button: Button) {
         console.log(Firebase);
         // Note that events registered this way cannot pass customEventData
        //  auth.signInWithPopup(Providers.google)
     }
     signOutCallback (button: Button) {
         console.log(auth);
        // Note that events registered this way cannot pass customEventData
        // auth.signOut()
    }
    start () {
        // [3]
    }

    // update (deltaTime: number) {
    //     // [4]
    // }
}

Errors:

[preview-error]unhandledrejection: Unable to resolve bare specifier 'fs' from http://192.168.1.107:7456/scripting/x/mods/file/D:/Game%20Assets/Cocos/CocosFirebaseDemo/node_modules/dom-storage/lib/index.js (SystemJS Error#8 https://git.io/JvFET#8)

[preview-error]throwUnresolved@http://192.168.1.107:7456/scripting/systemjs/system.js:696:16http://192.168.1.107:7456/scripting/systemjs/system.js:1048:28http://192.168.1.107:7456/scripting/systemjs/system.js:335:46map@[native code]http://192.168.1.107:7456/scripting/systemjs/system.js:333:46promiseReactionJob@[native code]

[preview-error]unhandledrejection: Unable to resolve bare specifier 'url' from http://192.168.1.107:7456/scripting/x/mods/file/D:/Game%20Assets/Cocos/CocosFirebaseDemo/node_modules/xmlhttprequest/lib/XMLHttpRequest.js (SystemJS Error#8 https://git.io/JvFET#8)

[preview-error]throwUnresolved@http://192.168.1.107:7456/scripting/systemjs/system.js:696:16http://192.168.1.107:7456/scripting/systemjs/system.js:1048:28http://192.168.1.107:7456/scripting/systemjs/system.js:335:46map@[native code]http://192.168.1.107:7456/scripting/systemjs/system.js:333:46promiseReactionJob@[native code]

It look like Cocos can’t use default nodeJS module.