rxjs: .withLatestFrom doesn't seem to work as an add operator

RxJS version: 5, beta11 Code to reproduce:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/scan';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/withLatestFrom';

Expected behavior: Lightweight import of Observable with operators added. Actual behavior: Merge, map etc all work. withLatestFrom import apparently occurs (browserify builds without error, versus say trying import 'rxjs/observable/withLatestFrom' like required for merge) but does not attach the function to Observable (index.js:49 Uncaught TypeError: filterGetQuery$.withLatestFrom is not a function.

Additional information:

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 26 (15 by maintainers)

Most upvoted comments

Assuming this is node on a server. This is basically how node_modules work. require will look for the nearest node_modules/rxjs folder that it can.

In the case of npm link and modules, they will all have different identities, and then in fact completely different Observables.

Are you using TypeScript, JavaScript, ES6 Syntax / Babel?

Is function bind (::) an option for you? You can use :: that is probably a more straightforward solution.

david-driscoll on Aug 17, 2016

you intentionally two different implementations of RxJS v5 Observable in your app?

No, it’s all rxjs-5.0.0-rc1. The problem I’m running into is that when linking to a library I’m working on (npm link) with a separate project, the Observables are not patched as referenced by @david-driscoll’s comment: “In the case of npm link and modules, they will all have different identities”

That’s still importing two versions of rxjs though, doubling the file size.

Not to fret, this isn’t for production. I want to be able to use a dummy React app in a different dir while linking to a library that exports a really minimal surface area with Rx.

rgbkrk on Oct 19, 2016

I ended up using the safe global singleton pattern (here, works great with Symbols) to expose a single Rx instance. Then only a single one of my npm modules (the base dataplane/framework) has Rx as an npm dependency, and everything else imports it from there meaning I can control the version from a single point and link away. Works great.

On Tue, Oct 18, 2016, 9:13 PM Kyle Kelley notifications@github.com wrote:

In the case of npm link and modules, they will all have different identities, and then in fact completely different Observables.

I ran into this just now with an npm linked version of a library. Is the best solution still ES7 function bind?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ReactiveX/rxjs/issues/1885#issuecomment-254706021, or mute the thread https://github.com/notifications/unsubscribe-auth/AHC8CjjrpwYgr2dEBgA5RZBkzejKgdAIks5q1ZjtgaJpZM4Jmw2g .

brokenalarms on Oct 19, 2016

Indeed…definitely duplicated 😛 That test fails. I had feared as much in my last mention to @kwonoj, but I can plainly see exports.observable = Observable and exports.observable = Observable1 in my vendor file (though I would still have just expected the latter to replace the former, must be referenced elsewhere).

No idea why and thank you @jayphelps for your initial suggestion uncovering the underlying issue. I have no idea why it’s importing twice and I can’t trace it back since this is just how browserify spits out the file…but in any case, not one for you guys then I guess. Thanks so much for your help though! 👍

brokenalarms on Aug 18, 2016

So external-module internally imports Observable with operators selectively while that module is separate npm package, and you’d like to patch that Observable’s operator instead of what you loaded in your code’s scope, is my understanding correct?

kwonoj on Aug 17, 2016

Interesting, I have figured it out. Maybe kinda obvious, maybe not… If I have an Observable starting in one external npm module, that flows through to end users in other modules, all the operators need to be added to augment that observable before it is declared…Which means that the source module containing the observable would need to proactively predict all the operators that users of that module will want access to. eg:

import stream from 'external-module'
import 'rxjs/add/operator/withLatestFrom'

stream
  .withLatestFrom // won't work.

Here, .withLatestFrom would have to be added in the external module, yet you couldn’t predict in that module all the ways the end users will be then manipulating those streams (and I have found I really need to trim down the operators in this way - importing rxjs whole causes very noticeable delays in import refresh times).

Is there any way selectively upgrade Observables without having to make everything available from the start?

brokenalarms on Aug 17, 2016