Uh-oh, looks like there's a problem resolving '@firebase/webchannel-wrapper'

After upgrading to the latest version of angularfire2, I encountered some issues despite following the installation guide. The error message I'm receiving is:

[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,
  ...

I've been struggling to solve this issue and would appreciate any help. Here's some relevant environment information:

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

If you need more details, please let me know. Thank you!

angulartypescriptionic2ionic3angularfire2

Answer №1

Issue:

./node_modules/firebase/firestore/platform_browser/webchannel_connection.js Error message: The module '@firebase/webchannel-wrapper' cannot be found

Resolution:

To fix this issue, you must add the @firebase/webchannel-wrapper module to your project.

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

Answer №2

Ensure to include the necessary package in your project

npm install @firebase/webchannel-wrapper --save

ALSO!! Don't forget to import it into app.module (or spend a day figuring it out like I did)

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bringing in TypeScript declarations for the compiled JavaScript librarybundle

I have a custom library written in TypeScript with multiple files and an index.ts file that handles all the exports. To consolidate the library, I used webpack to compile it into a single index.js file but now I'm facing challenges importing it with ...

node.jstypescriptwebpacktypescript-typings

Tips for integrating Atomic Design principles into Angular development

Can the combination of Angular and atomic design be a beneficial choice? "There is much discussion on creating design systems, with emphasis on defining color schemes, typography, grids, textures, etc. While these aspects are crucial, I am more focused on ...

javascriptangularatomic-design

Importing Variables in AngularJS 2

Is it possible to save a portion of my import URL as a constant variable in an external file? Here's what I have in mind: Project structure: Project | +--moduleA | | | +--src | | | +--objects | | | +--common | | | ...

angularjsangularimportstructureproject

The process of comparing two arrays of objects in es6 and filtering out the unmatched arrays

In my Angular application, I'm attempting to retrieve only the updated array that was modified from the user interface. Within this scenario, I have two arrays in which one of the role names has been changed. My goal is to compare and extract the mod ...

javascriptarraysangulartypescriptecmascript-6

Utilizing Typescript generics to define constraints for the type of T[K], where K is the key and T is the object

In the setting I'm dealing with, specific objects with an id attribute expire every "tick" and require retrieval using getObjectById. I am interested in creating a setter function to update a property of an object by mapping thing.property => getOb ...

typescriptgenericstypescript-generics

Determine the data type based on the object property

Can a versatile function be created to automatically determine the type based on an "external" object property? Consider the following scenario: const resolversMap: { overallRankingPlacement: (issuer: number, args: Record<string, any>, context: Re ...

typescripttyping

In order to access and showcase the current positions of each ngfor element, you need to obtain a reference to them

I am looking to retrieve references for each of the ngFor elements and display their latest Top and Left positions. Since these elements are draggable, their positions will be changing. While I can obtain a value for a single element, I am facing an issue ...

angular

What is the best way to refresh the data in my list when a subitem is updated through a GET request using RTK Query?

Having a good understanding of the RTK query concept, I am facing a specific use case where I require some guidance. In my application, there is a list component and a details component that allows users to navigate and view more information about a parti ...

reactjstypescriptreduxreact-reduxrtk-query

Executing the Onclick event within a primeNG menu bar

Need help with triggering the On-click event in PrimeNG? If you're looking to navigate to the UserFormComponent.html page and add a new user when clicking on the 'New' menu bar using PrimeNG, here's how you can achieve it: You can fin ...

angularprimeng

Exploring the concept of String Enums through Reverse-Mapping

I was exploring the use of string enums in TypeScript and came across an issue with reversed mapping support. Here's what my enum looks like: enum Mode { Silent = "Silent", Normal = "Normal", Deleted = "Deleted" } I want to be able to pa ...

javascriptnode.jstypescriptvisual-studio-codemsdn

What is the reason behind Angular's repeat filter only being able to access its own element within the return function?

I have successfully implemented some Angular code that is working, however, I am struggling to understand why it works. Coming from a C Sharp background and being new to JS and Typescript. <tr ng-repeat="colleague in Model.FilteredColleagueListModel | ...

javascriptangularjstypescript

Is it possible to automatically generate a discriminated union for every interface within a given namespace?

Currently utilizing TypeScript version 2.5, but willing to switch to 2.6 if necessary. In my code base, there exists a namespace containing a variety of interfaces: export namespace Interfaces { export interface One { kind: "One" } e ...

typescript

Utilizing Global Variables and Passing Values in Ionic 3

It seems like my issue is rather straightforward, but there is definitely something eluding me. After logging in, I need to store a TOKEN for HTTP requests in a global variable. Upon successful login, the HTTP get method returns an object with the HTTP co ...

javascriptangularhttptypescriptionic3

Issue with Angular-CLI freezing during the build process

After transitioning to angular-cli, I encountered an issue with production deployment. While everything runs smoothly on my local Windows 10 PC, the building process freezes at 10% when attempting to build on a CentOS server. Operating System: CentOS 6.6 ...

linuxangularwebpackangular-cliwebpack-2

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Generic abstract class encounters failure with Typescript TypeORM findOneBy({id: id}) operation

I have incorporated the "typeorm": "^0.3.7" module. import { IRepository, EntityBase } from "core" import { Database } from "../../db" import { EntityTarget, Repository } from "typeorm" export abstract clas ...

node.jstypescriptrepositorynode.js-typeorm

Having trouble showing information in primeng treetable, and encountering issues with response data returning as undefined when logged in console

Model Definition This model defines the structure of the data export interface NewEvaluation { id?: number; criteriaId?:number; parameterType?:string; parameterName?:string; weight?:number; thisYear?:number; lastMonth?:number; thisMonth?:number; ...

angular

The MatFormField component requires a MatFormFieldControl to be present in order to function properly. This error may occur if the

HTML CODE `<mat-form-field> <input type="file" (change)="onFileSelected($event)" name="categoryImage" > </mat-form-field>` TS code onFileSelected(event){ console.log(event);} Encountering an error even before beginning the ope ...

angularangular-material

What is the process for implementing mandatory field validation on a group of checkboxes?

Looking for assistance with Angular 2 Checkbox Selection: Check out the updated code snippet below: HTML <b><label *ngFor="let type of topics;let i=index" class="checkbox-inline"> <input type="checkbox" id="{{'ch ...

angularvalidationcheckboxangular2-formsrequired

Are event handler props in Typescript Polymorphic React Components being misassigned?

After making some adjustments, I enhanced the code to improve its readability. interface ModifiedProps<T extends ElementType> { as?: T; } type UpdatedProps<T extends ElementType> = ModifiedProps<T> & ComponentPropsWithoutRef<T ...

reactjstypescripttypescript-generics