acdlite / recompose

A React utility belt for function components and higher-order components.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

new version rxjs do not work for recompose

thinksource opened this issue · 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.

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)

I am having the same issue,

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

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

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]

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.