Typescript, Firebase, Cordova: Cannot find module for 'firebase'

Davide R Published at Dev

Davide R

I'm developing an hybrid app with Cordova and Typescript. I need to integrate Firebase in order to read/update/save some datas from database.

My issue is about importing and using Firebase in Typescript (no framework used). And also to test it on localhost.

So, this is what I have:

webpack.config.js

module.exports = function(options) {
  return {
    [...]
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        firebase: helpers.root('node_modules/firebase/firebase.js')
      }
    },
    [...]
    module: {
      rules: [
        { test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader' },
        { test: /firebase\.js$/, loader: 'expose-loader?firebase' },
        { test: /\.ts$/, loader: 'ts-loader', exclude: '/node_modules/' },
      ]
    }
  }
};

package.json

{
  [...]
  "main": "src/ts/index.ts",
  "devDependencies": {
    [...]
    "typescript": "2.2.2",
    "firebase": "^4.6.0"
  },
  "dependencies": {
    "@types/firebase": "^2.4.32",
    [...]
  }
}

tsconfig.json

{
  "files": [
    "./src/ts/index.ts",
    "./node_modules/@types/firebase/index.d.ts"
  ]
}

src/ts/index.ts

import * as firebase from "firebase";

export namespace Application {

  export function initialize() {
    const db = firebase.database();
  }

}

window.onload = function() {
  Application.initialize();
};

When I launch the app, it throws an error in console:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_firebase__ is not a constructor

Please, can you help me?

UPDATE: I've deleted unuseful lines of code and, as @kevinSpaceyIsKeyserSöze told me, I've edited part of Firebase code.

Davide R

After a long documentation and research and a few tries, this is a working solution:

First of all, you must have typings installed. Open the shell and type:

typings install github:typed-typings/npm-firebase
typings install firebase
npm i --save-dev firebase

Then in tsconfig.json, under files object:

"files": [
  "./typings/index.d.ts"
]

In src/ts/index.ts:

import * as firebase from "firebase";

export namespace Application {

  export function initialize() {
    const firebaseApp = firebase.initializeApp({ ...firebase config });
    const db = firebaseApp.database();
  }

}

window.onload = function() {
  Application.initialize();
};

That's all!

In this way, there won't be errors of Cannot find module for 'firebase'.

Collected from the Internet

Please contact [email protected] to delete if infringement.