An error was encountered in the rxjs-compat module at operator/shareReplay.d.ts line 2, character 10: TypeScript error TS2305

Currently, I am in the process of upgrading a basic Angular skeleton application from version 5 to version 6. However, I have encountered an issue while attempting to run the application:

ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): error TS2305: Module '"C:/newAdmin/testing-front-end/admin-fe/node_modules/rxjs/internal-compatibility/index"' does not export 'ShareReplayConfig'.

Below is my package.json configuration:

{
 "name": "admin-fe",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 },
 "private": true,
 "dependencies": {
   "@angular-devkit/core": "^7.3.0",
   "@angular/animations": "^6.1.0",
   "@angular/common": "^6.1.0",
   "@angular/compiler": "^6.1.0",
   "@angular/core": "^6.1.0",
   "@angular/forms": "^6.1.0",
   "@angular/http": "^6.1.0",
   "@angular/platform-browser": "^6.1.0",
   "@angular/platform-browser-dynamic": "^6.1.0",
   "@angular/router": "^6.1.0",
   "@ngrx/store": "^7.2.0",
   "angular-oauth2-oidc": "^5.0.2",
   "core-js": "^2.5.4",
   "moment": "^2.24.0",
   "rxjs": "6.3.3",
   "rxjs-compat": "^6.4.0",
   "zone.js": "~0.8.26"
  },
  "devDependencies": {
   "@angular-devkit/build-angular": "~0.7.0",
   "@angular/cli": "~6.1.3",
   "@angular/compiler-cli": "^6.1.0",
   "@angular/language-service": "^6.1.0",
   "@types/jasmine": "~2.8.6",
   "@types/jasminewd2": "~2.0.3",
   "@types/node": "~8.9.4",
   "codelyzer": "~4.2.1",
   "jasmine-core": "~2.99.1",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~1.7.1",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "~2.0.0",
   "karma-jasmine": "~1.1.1",
   "karma-jasmine-html-reporter": "^0.2.2",
   "protractor": "~5.3.0",
   "ts-node": "~5.0.1",
   "tslint": "~5.9.1",
   "typescript": "^2.9.1"
 }
}

The issue does not occur when using TypeScript version 3.3.1, but due to compiler restrictions, I must stick to TypeScript < v2.10.0.

Any suggestions on how to proceed further?

EDIT :

I have updated both rxjs and rxjs-compat versions to be 6.3.3, yet now I am faced with the following error:

ERROR in node_modules/@ngrx/store/src/store.d.ts(30,31): error TS2304: Cannot find name 'Extract'.
angulartypescriptrxjsangular-cli

Answer №1

I encountered a similar issue, and the solution was to downgrade rxjs-compat(6.3.3) to match rxjs(6.3.3).

In your package.json file, make sure it looks like this:

"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",

If you are using rxjs 6.4.0, there is no need for rxjs-compat, as it acts as a compatibility layer between rxjs v6 and v5.

You should be able to directly import { shareReplay } from 'rxjs/operators'; without any issues.

For more information on the operators, check out: https://www.learnrxjs.io/

Answer №2

Encountering a similar problem during a project where the versions of rxjs and rxjs-compat differed in the package.json file, with rxjs set to "6.3.3" and rxjs-compat at "6.4.0". To resolve this issue, I decided to downgrade the version of rxjs-compat using the following command:

npm install [email protected] --s

This approach successfully resolved the issue for me.

Answer №3

I encountered the same issue with different versions of 

"rxjs": "6.3.3","rxjs-compat": "6.4.0"
, and even after upgrading to version ^6.3.3, the problem persisted. Interestingly, removing the caret symbol ^ from rxjs-compat fixed the issue for me. Instead of ^rxjs-compat": "6.4.0", using rxjs-compat": "6.3.3" worked perfectly. For more details, you can visit this link. Thank you.

Answer №4

Dealing with a comparable problem, I was able to find a solution by utilizing the specified versions of rxjs and rxjs-compat in the package.json file. --->"rxjs": "6.3.3", --->"rxjs-compat": "6.3.3"

Answer №5

Within the package.json document, make adjustments by substituting "rxjs-compat": "^6.4.0" with "rxjs-compat": "^6.3.3" and execute this command:

npm install

Answer №6

After troubleshooting in Angular 6, I found that the problem was fixed when I removed

import 'rxjs/Rx';

from my codebase.

Answer №7

To resolve the problem, I successfully used the npm install command for [email protected] --s.

Answer №8

After encountering an issue with importing Observable from rxjx/Rx, I was able to resolve it by changing the import to rxjs instead.

The versions I was using at the time were:

"rxjs": "~6.2.0",
"rxjs-compat": "^6.0.0",

I didn't have to update the versions, just switch the import statement from:

import { Observable } from 'rxjs/Rx';

to

import { Observable } from 'rxjs';

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

Converting input dates in nest.js using TypeScript formatting

Is it possible to set a custom date format for input in nest.js API request body? For example, like this: 12.12.2022 @ApiProperty({ example: 'ADMIN', description: 'Role name', }) readonly value: string; @ApiProperty({ ...

javascripttypescriptnestjs

Using a SharedModule in Angular2: A Guide

I have a single Angular2 component that I need to utilize across multiple modules. To achieve this, I created a SharedModule as shown below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-bro ...

angulartypescriptangular2-modulesng-modules

Best practice for managing asynchronous calls and returns in TypeScript

I’ve recently started working on an Ionic 4 project, delving into the realms of Javascript / Typescript for the first time. Understanding async / await / promise seems to be a bit challenging for me. Here’s the scenario: In one of the pages of my app ...

javascripttypescriptpromise

Tips for utilizing a ternary operator to set a className in an element

I'm in the process of developing a website using React and Next.js. One of the components on my site is section.tsx, which displays a subsection of an article based on the provided props. I'm looking to add an 'align' property to this c ...

reactjstypescriptnext.jsjsxtailwind-css

Error in Typescript: 2 arguments were provided instead of the expected 0-1 argument

When attempting to run a mongoose schema with a timestamp, I encountered an error: error TS2554: Expected 0-1 arguments, but got 2. { timestamps: true } Below is the schema code: const Schema = mongoose.Schema; const loginUserSchema = new Schema( { ...

typescriptmongodbmongoosemongoose-schema

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

I'm currently in the process of deploying my Next.js TypeScript project on Vercel, but I've encountered an error. Can someone please help me with fixing this bug? Should I try running "npm run build" and then push the changes to GitHub again? Tha ...

javascriptreactjstypescriptnext.jsvercel

Utilizing req.session in an Express application with Angular (written in TypeScript) when deploying the backend and frontend separately on Heroku

I'm currently facing an issue where I am unable to access req.session from my Express app in Angular. Both the backend and frontend are deployed separately on Heroku. I have already configured CORS to handle HTTP requests from Angular to my Express ap ...

angulartypescriptexpress-session

What is the best way to invoke a method from a class in Angular testing when the class has a Router constructor?

Currently, I am in the process of creating a test case for my authentication service outlined below. AuthService.ts import {Subject} from 'rxjs'; import {User} from './user.model'; import {AuthData} from './auth-data.model' ...

angulartypescript

Converting Typescript fat arrow syntax to regular Javascript syntax

I recently started learning typescript and I'm having trouble understanding the => arrow function. Could someone clarify the meaning of this JavaScript code snippet for me: this.dropDownFilter = values => values.filter(option => option.value ...

angulartypescript

Frontend Will Not Be Able to Access Cloud Run Environment Variables when in Production

My current setup involves using docker to build an image through Google Cloud Build and Google Cloud Registry. I have Pub/Sub triggers in place to populate Cloud Run instances with new Docker images upon a successful build. The issue I am facing is that m ...

reactjstypescriptgoogle-cloud-platformnext.jsgoogle-cloud-run

Tips for customizing Material UI CSS default properties in React

I'm currently working on a React project and utilizing the 'Table' component from Material UI. The default CSS properties of this table, along with its components like TableHead, TableCell, and TableRow, are proving difficult to override whi ...

reactjstypescriptmaterial-uiviteswc

Mocking a service dependency in Angular using Jest and Spectator during testing of a different

I am currently using: Angular CLI: 10.2.3 Node: 12.22.1 Everything is working fine with the project build and execution. I am now focusing on adding tests using Jest and Spectator. Specifically, I'm attempting to test a basic service where I can mo ...

angulartypescriptunit-testingts-jestangular-spectator

Exploring depths with Typescript recursion

I'm attempting to implement a recursive search in Typescript, but I am encountering an issue where TS is unable to determine the return type of the function. function findDirectory( directoryId: Key, directory: Directory, ) { if (!directory) ret ...

reactjstypescript

Using IONIC2 to localize month names in the UI

I am encountering a challenge with ionic2 related to translating month names into Portuguese for Brazil. In my views, I utilize the date filter to display the full month names, but they are currently appearing in English. I need them to be displayed in Bra ...

angularjsangularionic-frameworkionic2ionic-view

Exploring the power of IdentityServer4 in conjunction with an ASP.NET core API and Angular for seamless

I have implemented IdentityServer4 for authentication and authorization in my ASP.NET core API, with Angular4 on the client side. I am currently using the token endpoint (http://myapidomain/connect/token) to obtain an access_token using grant type = Resour ...

angularapiasp.net-coreidentityserver4

A different component experiences an issue where Angular Promise is returning undefined

This is the carComponent.ts file containing the following method: async Download() { try { const settings = { kit: true, tyres: true, serviced: false, }; const [kits, tyres] = await Promise.all([ this.c ...

javascriptangular

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Currently, I am utilizing a mean stack in order to craft a bug tracking system. The issue arises when my express.js service returns an array of issues, which I assign to another array that functions as the dataSource for mat-table. However, despite the ar ...

angulartypescriptexpressangular-materialangular6

Exploring the Power of Modules in NestJS

Having trouble with this error - anyone know why? [Nest] 556 - 2020-06-10 18:52:55 [ExceptionHandler] Nest can't resolve dependencies of the JwtService (?). Check that JWT_MODULE_OPTIONS at index [0] is available in the JwtModule context. Possib ...

javascripttypescriptmodulenode-modulesnestjs

What causes the string to be treated as an object in React Native?

I am fetching a string value through an API and I need to display it in the View. However, the string value is coming as a Promise. How can I handle this? "Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65 ...

javascriptreactjstypescriptreact-native

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

javascriptreactjstypescriptnext.js