Ionic2 + Firebase :: build dev failed - firebase

Question

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
EDIT
I've traced the error down to node_modules/firebase/firebase.d.ts in the last section which says:
declare module 'firebase' {
export = firebase;
}
For this, the compiler complains: Duplicate identifier 'export='.
If I remove this section, or the export = firebase; line, the error goes away and ionic serve works fine, but I lose access to the firebase object.
Even more oddly, if I start with a blank project with only firebase added, and run ionic serve, things work fine. Next, I import firebase in one of my source files and everything works fine still. Until I terminate ionic serve and restart it. At that point, I get the same error as the one listed near the top of the post.
I've even updated my node, ionic, cordova and ionic-app-scripts. ionic info now shows:
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.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Not installed
Still the same issue though. I desperately need help to resolve this issue.. =/
EDIT
For more info:
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/app-scripts": "0.0.46",
"#ionic/storage": "1.1.6",
"firebase": "^3.6.2",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"lodash": "^4.17.2",
"rxjs": "5.0.0-beta.12",
"uuid": "^3.0.1",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.45",
"typescript": "2.0.6"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "An Ionic project"
}
npm versions
npm#3.10.8
cordova#6.4.0
ionic#2.1.14
typescript#2.0.10
firebase#3.6.2

Answer 1

I have the Same Problem look here:
https://forum.ionicframework.com/t/build-dev-failed-cannot-read-property-indexof-of-undefined/71506