recompose icon indicating copy to clipboard operation
recompose copied to clipboard

new version rxjs do not work for recompose

Open thinksource opened this issue 6 years ago • 8 comments

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.

thinksource avatar Oct 07 '18 01:10 thinksource

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)

terrierscript avatar Oct 07 '18 09:10 terrierscript

I am having the same issue,

jacobbogers avatar Oct 07 '18 21:10 jacobbogers

+1

AlexandrAnash avatar Oct 08 '18 17:10 AlexandrAnash

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 });

evertbouw avatar Oct 15 '18 13:10 evertbouw

+1

Vitormdias avatar Oct 23 '18 00:10 Vitormdias

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

webberwang avatar Jan 19 '19 01:01 webberwang

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]

amaury1093 avatar Jan 29 '19 16:01 amaury1093

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.

jameslaneconkling avatar Jun 13 '19 16:06 jameslaneconkling