Ionic 2 RC.0 and Firebase (not angularFire)

Hi Guys,

today i have migrated my app from the beta to ionic 2 RC.0.

It looks awesome so far but i use firebase and have a strange issue:

The Error says:

[16:52:39]  rollup: Export 'auth' is not defined by '/cms/athl3tics/.tmp/pages/auth/login/login.js'

[16:52:39]  rollup: Use of `eval` (in /cms/athl3tics/node_modules/firebase/auth.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

[16:52:39]  rollup: Use of `eval` (in /cms/athl3tics/node_modules/firebase/database.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details

In my package Json i just used the newest version of firebase:
"firebase": "3.4.1",

And i Import firebase with:
import * as firebase from 'firebase';

But IntelliJ marked this line already as red, so something is wrong there but iam not sure what it is?

When i do “ionic serve” i get the message in my console:
Uncaught TypeError: Cannot read property 'navigator' of undefined

Does someone have a hot tip for me?

1 Like

I have same issue, too. Open for the solutions :frowning:

Same issue. Having lot of issues migrating to ionic 2 rc :frowning:

Same here. I also have:

src/app/app.component.ts(9,27): error TS2307: Cannot find module 'firebase'. 
[01:45:43]  rollup: Export 'initializeApp' is not defined by

Also with the same problem.

Please see this thread

I have switched from:
import * as firebase from 'firebase';
to
import firebase from 'firebase';

which eliminated the error messages regarding ‘auth’, ‘eval’ etc.

However, I am still seeing the following error message:
Uncaught TypeError: Cannot read property 'navigator' of undefined

when attempting to initialize firebase under the constructor.

Was anyone able to overcome this error?

Hi Guys,

In my case, I’ve found we can modify our rollup config to make it work:
(node_modules/@ionic/app-scripts/config/rollup.config.js)

var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');

// https://github.com/rollup/rollup/wiki/JavaScript-API

module.exports = {
  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: './.tmp/app/main.dev.js',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  // Add this to avoid Eval errors
  useStrict: false,

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    ngTemplate(),
    commonjs({
        include: [
        'node_modules/rxjs/**',
        'node_modules/angularfire2/**',
        'node_modules/moment/**',
        'node_modules/@ionic/storage/**'
        ],
        namedExports: {
        'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'],
        'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database']
        }
    }),
    nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    })
  ]

};

Give it a try…

And please, check this example:
https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

3 Likes

this seems like quite the hack, but I guess it is the best we got for now! Integrated basic login functionality… will try some other features, but I really think this, AngularFire2, is still beta and not ready for production code

1 Like

I have the same problem with navigator ,

but this works for me :

However if i switch import * as GeoFire from 'geofire'; to import * as GeoFire from 'geofire';
I still get the same error : error TS2307: Cannot find module 'geofire'.

Any ideas ?

I have the same issue as well. Does that hack method work? or is that not a preferred way to doing things? :frowning:
Seems like that hack required declaration of each and every firebase func?
‘node_modules/firebase/firebase.js’: [‘initializeApp’, ‘auth’, ‘database’]

using npm @types is the way to add typings in typescript 2. And using

C:\myapps\ionic2-tests\mmsapp>npm install @types/firebase --save-dev --save-exact
ionic-hello-world@ C:\myapps\ionic2-tests\mmsapp
`-- @types/firebase@2.4.30

installs firebase API 2.4.30 and not 3.0 so hence we are getting these errors.

looks like wait till firebase3 typings are released as npm @types is the only way? or there any way we can generate @types?

As a temperory fix,
after installing npm @types,

I replaced the index.t.ds files inside @types/firebase with contents from this file below.

https://gist.githubusercontent.com/cdcarson/28399c50b02bf6c507fbf5b7b30daa31/raw/fa089d231ca4253d4715f8161efc6af74c972dfa/firebase-sdk-3-typings.d.ts

See if my solution works. It works for me so far. I am able to intergrate firebase 3 (not angularFire) on browser and device with no issue so far.

This seems to remove the errors but I still see ‘eval’ warnings. my above method doesnt work either.

Hey guys check this out. http://alexmgrant.github.io/ionic/firebase/rc0/lodash/2016/10/06/ionic-rc0-&-firebase.html

Hi alexmgrant, I have 404 error on your link

Thank you, updated. …