错误：无法解析“@firebase/webchannel-wrapper”

Posted 2023-03-13

【中文标题】错误：无法解析“@firebase/webchannel-wrapper”

【英文标题】：Error: Can't resolve '@firebase/webchannel-wrapper'

【发布时间】：2018-03-15 07:51:23

【问题描述】：

所以，我最近更新到了 angularfire2 的最新和最好的版本，并且遇到了一些问题。我按照 angularfire2 开发人员指南安装项目，但仍然收到以下错误：

[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"
    ]
  

我一直在努力解决这个问题，并希望有人能提供帮助。相关环境信息如下：

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 

如果有任何其他信息可以提供帮助，请告诉我。提前致谢。

【参考方案1】：

错误：

./node_modules/firebase/firestore/platform_browser/webchannel_connection.js 未找到模块：错误： 无法在

中解析“@firebase/webchannel-wrapper”

解决方案：

你需要安装@firebase/webchannel-wrapper模块。

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

【讨论】：

是的，我已经经历过几次。每次也删除了 package-lock.json 文件。还是不行。

OK。也试试这个：卸载agf2模块并重新安装。

试试这个npm install @firebase/webchannel-wrapper --save-exact

成功！太棒了，非常感谢你。自从我第一次开始升级以来，它一直是依赖关系的噩梦。

@Sampath 我无法在 npm 存储库中找到 agf2 模块

【参考方案2】：

确保你添加了包

npm install @firebase/webchannel-wrapper --save

并且！！将其导入到 app.module 中（或者像我一样浪费一天）

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