Different method of resolving Typescript modules for 'rxjs' within a single file

I've been stuck in a loop for hours, so here's another tricky question:

Currently inside a lerna mono repo with two sub projects, namely ProjectA and ProjectB.

Both ProjectA and ProjectB have a dependency on rxjs.

In addition, ProjectB depends on ProjectA, which is managed by lerna through symlinks.

The issue arises within ProjectB, where I have a file containing the following imports:

import { Subject } from 'rxjs/Subject'
import { Observable } from "rxjs/Observable";

Within this file, there is a class with a private variable of type Subject, exposed as an Observable. However, TypeScript is throwing the error:

Type '

Subject<ActionRequestResult<any>>
' is not assignable to type '
Observable<ActionRequestResult<any>>
'. Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

Further investigation reveals that the two rxjs imports at the top of the file are actually sourced from different locations. Hence, although Subject extends Observable, they are not compatible within my file.

I tried installing rxjs at the root project level (where lerna.json resides), but since ProjectB has a dependency on webpack-cli which transitively relies on rxjs, it still ends up being installed in ProjectB.

Uncertain about the next steps, I wonder if this is a bug or a configuration issue?

Given that ProjectA internally utilizes Subject, I suspect TypeScript might be misinterpreting the project structure, causing this snag.

Any insights or suggestions?

javascripttypescriptnpmrxjs

Answer №1

After some troubleshooting, I managed to resolve the issue by simply rearranging my import statements. It seems like there may be a bug in the Typescript language service causing this behavior. I plan on submitting an official report about it soon.

Initially, my import statements looked like this:

import { Something } from 'ProjectA';
import { Subject } from 'rxjs/Subject';
import { Observable } from "rxjs/Observable";

Due to ProjectA referencing Subject, the language service was caching that information. So when I tried to import Subject myself, it used the cached reference instead.

The problem was resolved by reordering the imports as follows:

import { Subject } from 'rxjs/Subject';
import { Observable } from "rxjs/Observable";
import { Something } from 'ProjectA';

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

What causes the AngularJS variable to receive a null value following an HTTP request?

Using AngularJS on the frontend, I have a variable named ttest defined before making an $http call. Subsequently, data is assigned to this variable. The value of ttest[0] is available within the $http function but not outside of it. angular.module(&apos ...

javascriptangularjsangularjs-directiveangularjs-scope

What steps can I take to give priority to a particular ajax call?

Every 10 seconds, two ajax based methods are executed. However, when I submit the form for processing, it waits for the previous ajax calls to complete before processing. I want to prioritize the form submission. Below is the script that I am using: func ...

javascriptajax

evaluating an object against null

When comparing two objects a and b, it is necessary to ensure that one of them is not null. However, deciphering this can be quite chaotic. {} - null => -0 [] - null => 0 1 - null => 1 "1" - null => 1 true - null ...

javascriptobject-comparison

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...

javascriptjqueryhtml

Is there a way to eliminate a specific input box using the jquery remove function?

I've been working on some code and have run into an issue. Currently, the remove function only works on one input box that is created with the append function. I would like it to be able to work on every input box generated through the append function ...

javascriptjqueryjquery-ui

Displaying a pair of values using a single noUISlider

I'm trying to achieve something unique with a noUIslider range by outputting two values. While I've managed to display the same value twice using examples from the noUIslider documentation, my goal is to have one of the outputs show a value that ...

javascriptjquerynouislider

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

When making a request to the 500px API using $http for popular photos, the response object is successfully returned. However, I am facing difficulty in pushing the retrieved photo items to the view. Below is my current controller code: meanApp.controller ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

I'm looking for a streamlined method to simultaneously access multiple APIs with GraphQL and React

For my client side project, I'm using GraphQL and React but opting not to use Redux for state management. Instead, I have organized my API calls into custom hook files as shown below: const [getSomeData, { data: getSomeDataData, loading: getSomeData ...

javascriptreactjsoptimizationgraphqlfetch

The linking process in AngularJS is encountering difficulties when trying to interact with

I've already looked at similar questions, and my code seems correct based on the answers provided. It's a very simple beginner code. <html ng-app=""> <head> <title>Assignment</title> <script src=" ...

javascripthtmlcssnode.jsangularjs

Having issue with jQuery popup not functioning correctly on the right side with the contact form. Is there anyone who knows how

Looking for a side slide popup that only accepts paragraph content? Want to add a contact form to it? Check out this fiddle - link here For a working example, visit - $(function() { // Slide from right to left $('#test2').PopupLayer({ ...

javascriptjqueryhtmlcss

Use Cypress to make requests to GraphQL endpoints using the .request method

Despite my efforts to search for information on using Cypress requests with GraphQL, I come across terms like "mock up server" and "stub" without a clear example. I am struggling to find a comprehensive guide on how to effectively utilize GraphQL with cy ...

javascriptunit-testinggraphqlgraphql-jscypress

PHP array does not retain a variable

While building a website, I encountered a perplexing bug during coding. The issue arises when I store MySQL query results in an array and then call a JavaScript function with that data. Initially, the array contains 9 items: 8 of type tinyint(4) (from the ...

javascriptphpmysqlarrays

Relying heavily on a preferGlobal package

In the scenario where I am attempting to utilize a package that contains the preferGlobal option. What is the process for including jshint as a dependency in the package.json, thus avoiding the following warning message? npm WARN prefer global <a href ...

node.jsconfigurationnpm

Encountered an issue while attempting to create a Higher Order Component using React and

Encountered an issue while using recompose to create a Higher Order Component (HoC) with withState and lifecycle: warning.js?8a56:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM eleme ...

javascriptreactjswebpackreact-hot-loaderrecompose

problems with using includes() in the array every() method

Hi everyone, I've been spending quite a bit of time trying to find a solution to this problem and I'm hoping someone can help me out. The issue at hand is that I have 2 arrays - one containing multiple words from an address and another built wit ...

javascriptarrays

Angular's Spanning Powers

How can I make a button call different methods when "Select" or "Change" is clicked? <button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default"> <span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</spa ...

htmlangulartypescript

Selecting ion-tabs causes the margin-top of scroll-content to be destroyed

Check out the Stackblitz Demo I'm encountering a major issue with the Navigation of Tabs. On my main page (without Tabs), there are simple buttons that pass different navparams to pre-select a specific tab. If you take a look at the demo and click t ...

angulartypescriptionic-frameworkionic3

The data from my ajax code is not being successfully transmitted to the database

I'm having trouble using ajax to add data to the database. I'm not sure if the issue lies in the ajax code or the PHP code. Here is a snippet of my code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ ...

javascriptphphtmlajaxdatabase

Angular is unable to start the variable_INITIALIZation process

I've created a method called get that returns data of type ProductModel. getProduct(id:number): Observable<ProductModel[]> { const url = `${'api/product/getProductById/'}/${id}`; return this.http.get<ProductModel[]>(u ...

angulartypescriptget

Extract data from Markit On Demand API using JavaScript and AJAX

I'm struggling to properly parse the response from the API. While I can retrieve the entire response, I am a bit lost on how to effectively parse it. Below is my code snippet: <!DOCTYPE> <html> <head> <style> img ...

javascriptjqueryajax