Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

new version rxjs do not work for recompose #748

Open
thinksource opened this issue Oct 7, 2018 · 8 comments
Open

new version rxjs do not work for recompose #748

thinksource opened this issue Oct 7, 2018 · 8 comments

Comments

@thinksource
Copy link

thinksource commented Oct 7, 2018

I use rxjs 6.3.3 with recompose, it give me error of my code:

import rxjsConfig from "recompose/rxjsObservableConfig";
import { Observable } from "rxjs";

setObservableConfig(rxjsConfig)

const MyComp = componentFromStream(props$ => {
    console.log(props$);
    return Observable.subscribe(count => <h1>{count}</h1>);
})

The error happens on:

node_modules/recompose/rxjsObservableConfig.js:11

TypeError: Cannot read property 'Observable' of undefined

   8 | var _rxjs = _interopRequireDefault(require("rxjs"));
   9 | 
  10 | var config = {
> 11 |   fromESObservable: _rxjs.default.Observable.from,
  12 |   toESObservable: function toESObservable(stream) {
  13 |     return stream;
  14 |   }

Even if I change the line 11 to:

 fromESObservable: _rxjs.Observable.from,

There is still errors.

@terrierscript
Copy link
Contributor

I got same issue.
and I found workaround

import { mapPropsStreamWithConfig } from "recompose"
import { from } from "rxjs"

const rxjsConfig = {
  fromESObservable: from,
  toESObservable: (stream) => stream
}

// usage
const mapPropsStream = mapPropsStreamWithConfig(rxjsConfig)

@jacobbogers
Copy link

I am having the same issue,

@AlexandrAnash
Copy link

+1

@evertbouw
Copy link

evertbouw commented Oct 15, 2018

You will need to add the symbol-observable polyfill yourself, and it needs to be loaded before rxjs does. Then set the observable config

import "symbol-observable";
import { setObservableConfig } from "recompose";
import { from } from "rxjs";
setObservableConfig({ fromESObservable: from });

@Vitormdias
Copy link

+1

@webberwang
Copy link

Im getting Observable.subscribe is not a function even with the above config changes

@amaury1093
Copy link

Any idea how to solve types with TypeScript? I'm getting

Type '{ <T>(input: ObservableInput<T>, scheduler?: SchedulerLike | undefined): Observable<T>; <T>(input: ObservableInput<ObservableInput<T>>, scheduler?: SchedulerLike | undefined): Observable<...>; }' is not assignable to type '<T>(observable: Subscribable<T>) => any'.
  Types of parameters 'input' and 'observable' are incompatible.
    Type 'Subscribable<any>' is not assignable to type 'ObservableInput<any>'.
      Property 'then' is missing in type 'Subscribable<any>' but required in type 'PromiseLike<any>'. [2322]

@jameslaneconkling
Copy link

Here's a short (crappy) working version for typescript + rxjs v6

import { ComponentEnhancer, mapPropsStreamWithConfig, mapper } from "recompose";
import { Observable, from } from "rxjs";

export const mapPropsStream = mapPropsStreamWithConfig({
  fromESObservable: from,
  toESObservable: (stream: Observable<any>) => stream
}) as any as <TInner, TOutter>(
  transform: mapper<Observable<TOutter>, Observable<TInner>>
) => ComponentEnhancer<TInner, TOutter>

# usage
mapPropsStream<number, number>(
  (props$) => props$.pipe(map((n) => n + 1))
)

Essentially, manually define fromESObservable and toESObservable (as @terrierscript suggested), and cast the result from (transform: mapper<Subscribable<TOutter>, Subscribable<TInner>>) to (transform: mapper<Observable<TOutter>, Observable<TInner>>). Would love to hear if there's a solution that doesn't require casting.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants