Error: Can't resolve '@firebase/webchannel-wrapper'

Question

So, I recently updated to the latest and greatest for angularfire2 and have been running into some issues. I followed the angularfire2 developer guide for installing the project but am still getting the following error:

[18:57:50]  ionic-app-script task: "build" [18:57:50]  Error: ./node_modules/firebase/firestore/platform_browser/webchannel_connection.js Module not found: Error: 
        Can't resolve '@firebase/webchannel-wrapper' in 
        '/Users/usr/Documents/project/node_modules/firebase/firestore/platform_browser' resolve 
        '@firebase/webchannel-wrapper' in 
        '/Users/usr/Documents/project/node_modules/firebase/firestore/platform_browser' Parsed request is 
        a module using description file: /Users/usr/Documents/project/node_modules/firebase/package.json 
        (relative path: ./firestore/platform_browser) Field 'browser' doesn't contain a valid alias configuration 
        after using description file: /Users/usr/Documents/project/node_modules/firebase/package.json 
        (relative path: ./firestore/platform_browser) resolve as module looking for modules in 
        /Users/usr/Documents/project/node_modules using description file: 
        /Users/usr/Documents/project/package.json (relative path: ./node_modules) Field 'browser' doesn't 
        contain a valid alias configuration after using description file: 
        /Users/usr/Documents/project/package.json (relative path: ./node_modules) using description file: 
        /Users/usr/Documents/project/package.json (relative path: 
        ./node_modules/@firebase/webchannel-wrapper) no extension Field 'browser' doesn't contain a valid alias 
        configuration /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper doesn't exist 
        .ts Field 'browser' doesn't contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.ts doesn't exist .js Field 
        'browser' doesn't contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.js doesn't exist .json 
        Field 'browser' doesn't contain a valid alias configuration 
        /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.json doesn't exist as 
        directory /Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper doesn't exist 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.ts] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.js] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper.json] 
        [/Users/usr/Documents/project/node_modules/@firebase/webchannel-wrapper] @ 
        ./node_modules/firebase/firestore/platform_browser/webchannel_connection.js 12:25-64 @ 
        ./node_modules/firebase/firestore/platform_browser/browser_platform.js @ 
        ./node_modules/firebase/firestore/platform_browser/browser_init.js @ ./node_modules/firebase/firestore.js @ 
        ./node_modules/angularfire2/firestore/collection/changes.js @ 
        ./node_modules/angularfire2/firestore/public_api.js @ ./node_modules/angularfire2/firestore/index.js @ 
        ./src/app/app.component.ts @ ./src/app/app.module.ts @ ./src/app/main.ts 

package.json

{
  "name": "stockup",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/tsc-wrapped": "4.4.4",
    "@ionic-native/barcode-scanner": "4.3.0",
    "@ionic-native/core": "3.14.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "@types/node": "8.0.19",
    "angularfire2": "^5.0.0-rc.0",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "firebase": "^4.5.0",
    "install": "^0.10.1",
    "ionic-angular": "^3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "npm": "^5.4.2",
    "phonegap-plugin-barcodescanner": "^6.0.8",
    "promise-polyfill": "^6.0.2",
    "rxjs": "5.4.3",
    "sudo": "^1.0.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.0.0",
    "typescript": "^2.5.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

I've been beating my head against the wall trying to figure this out and was hoping someone out there can help. Relevant environment information below:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

Node  : v6.11.3
npm   : 5.4.2 
OS    : OS X El Capitan
Xcode : Xcode 8.2.1 Build version 8C1002 

Let me know if there's any additional information I can provide to help. Thanks in advance.

Answer 1

Error:

./node_modules/firebase/firestore/platform_browser/webchannel_connection.js Module not found: Error: Can't resolve '@firebase/webchannel-wrapper' in

Solution:

You need to install @firebase/webchannel-wrapper module.

npm install @firebase/webchannel-wrapper --save-exact

Answer 2

Make sure you add the package

npm install @firebase/webchannel-wrapper --save

AND!! Import it into app.module (or be like me and waste another day)

import {webchannel} from '@firebase/webchannel-wrapper';