Firebase :: build dev failed

Ionic Framework ionic-v3
1

Hi,

I’ve been having this issue for the last couple of days and was able to narrow down the culprit just today:

Starting with a brand new project, and adding firebase to it:

ionic start -a "MyApp" -i com.package.xyz MyApp tabs --v2
npm install --save firebase

At this point, ionic serve works correctly. But if I import firebase in any file:

import firebase from 'firebase';

Now running ionic serve --debug throws the following errors:

******************************************************
 Dependency warning - for the CLI to run correctly,      
 it is highly recommended to install/upgrade the following:     

 Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)
 Install ios-deploy to deploy iOS applications to devices.  `npm install -g ios-deploy` (may require sudo)

******************************************************

> ionic-hello-world@ ionic:serve /Users/Desktop/Projects/MyApp
> ionic-app-scripts serve "--debug"

[13:27:37]  ionic-app-scripts 0.0.45 
[ DEBUG! ]  An BuildUpdateStarted event occurred  MEM: 116.7MB 
[ DEBUG! ]  An BuildUpdateCompleted event occurred  MEM: 116.7MB 
[ DEBUG! ]  An FileChange event occurred  MEM: 116.9MB 
[ DEBUG! ]  An ReloadApp event occurred  MEM: 116.9MB 
[13:27:38]  watch started ... MEM: 117.2MB 
[13:27:38]  build dev started ... MEM: 117.2MB 
[13:27:38]  clean started ... MEM: 117.2MB 
[ DEBUG! ]  clean /Users/Desktop/Projects/MyApp/www/build  MEM: 117.2MB 
[13:27:38]  clean finished in 6 ms MEM: 117.4MB 
[13:27:38]  copy started ... MEM: 117.4MB 
[13:27:38]  transpile started ... MEM: 117.5MB 
[13:27:42]  build dev failed: Cannot read property 'indexOf' of undefined  MEM: 253.7MB
[ DEBUG! ]  TypeError: Cannot read property 'indexOf' of undefined at loadDiagnostic 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/logger/logger-typescript.js:47:27)
            at 
            /Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/logger/logger-typescript.js:12:16
            at Array.map (native) at Object.runTypeScriptDiagnostics 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/logger/logger-typescript.js:11:26)
            at /Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/transpile.js:92:47 at 
            transpileWorker 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/transpile.js:62:12) at 
            Object.transpile 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/transpile.js:26:12) at 
            buildDev 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/build.js:84:24) at 
            buildWorker 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/build.js:35:12) at 
            Object.build 
            (/Users/Desktop/Projects/MyApp/node_modules/@ionic/app-scripts/dist/build.js:19:12)  
            MEM: 253.7MB 
[ DEBUG! ]  listening on 8100  MEM: 253.9MB 
[ DEBUG! ]  watcher ready: 
            /Users/Desktop/Projects/MyApp/Users/Desktop/Projects/MyApp/src/assets/,/Users/Desktop/Projects/MyApp/src/index.html,/Users/Desktop/Projects/MyApp/src/manifest.json,/Users/Desktop/Projects/MyApp/src/service-worker.js,node_modules/ionic-angular/polyfills/polyfills.js,node_modules/ionicons/dist/fonts/
             MEM: 253.8MB 
[13:27:42]  copy finished in 3.69 s MEM: 253.8MB 
[ DEBUG! ]  watcher ready: 
            /Users/Desktop/Projects/MyApp/Users/Desktop/Projects/MyApp/src/**/*.(ts|html|scss)
             MEM: 253.8MB 
[13:27:42]  watch ready in 3.70 s MEM: 253.8MB 
[13:27:42]  dev server running: http://localhost:8100/

If I remove the import, ionic serve works correctly again.

Here is the output of ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Not installed

How can I correct this error?

Asim

2

Did you install the types?

Install Firebase types npm install @types/request@0.0.30 --save-dev --save-exact

I have an app that is using Firebase without any problems with the rc3. Check it out maybe it can help!

3

Hi @gigocabrera…

Yes, I have tried it with and without types. The odd thing is, if I start with a project in which I have added firebase but no file currently imports it, then ionic serve works right. And continues to do so as I modify source code, import firebase, add code to use it, etc. It works fine. But if I Ctrl+C on ionic serve and restart it again, it starts giving me this error and keeps doing so till I’ve removed every last import for firebase in the project…
=/

4

Hi again @gigocabrera…

I checked out your github repo too… running npm install and then ionic serve --debug gives me the same error… I’ve traced the error to node_modules/firebase/firebase.d.ts where it says:

declare module 'firebase' {
  export = firebase;
}

The compiler complains: Duplicate identifier 'export='.

If I remove this section, the compiler error goes away but I lose access to the firebase object in my app. If I restore it, ionic serve goes bonkers… =/

And the crazy thing is… If I run ionic serve on a blank project with firebase added, it works. Even if I import firebase while ionic serve is running, everything works fine. It fucks up only when I terminate the ionic serve and start it up again.