"You provided an invalid object where a stream was expected" when using rxjs6 and recompose's componentFromStreamWithConfig

Question

When using rxjs 6.3.3 and recompose componentFromStreamWithConfig, I hit the error: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

I've tried providing a custom rxjsConfig object to componentFromStreamWithConfig as suggested in other questions relating to recompose and rxjs 6.

import "symbol-observable";
import {
  componentFromStreamWithConfig,
  createEventHandlerWithConfig
} from "recompose";
import { from } from "rxjs";

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

export const createEventHandler = createEventHandlerWithConfig(rxjsConfig);
export const componentFromStream = componentFromStreamWithConfig(rxjsConfig);

The exported componentFromStream is used in a typical way in various components.

I would expect this to work given the rxjs 6 configuration - however the fromESObservable seems to be a problem (stacktrace points to Object.from [as fromESObservable])

Answer 1

The underlying problem seems to be:

1. recompose polyfills Symbol.observable by means of symbol-observable.
2. only when this polyfill is present, rxjs will recognize the object received from componentFromStream as an Observable, otherwise it throws the TypeError.

My workaround was to import recompose before anything of rxjs and the error disappeared. Obviously the order of imports has relevance here, this has truly the potential to drive people mad!

In your case it would be sufficient to change the code that uses your custom componentFromStream:

• to either import your custom componentFromStream before any imports of rxjs,
• or to polyfill Symbol.observable explicitly by importing symbol-observable, but again on top of all rxjs-imports.