TypeError: invalid object where a stream was expected (rxjs 6.2.0)

[tukwan]

Hi,
I'm getting Error using toStream function.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Code: (breaks on Observable.from)

  componentDidMount() {
    this.sub$ = Observable.from(toStream(() => this.props.store.slug))
      .switchMap(slug => fetchSlug(slug))
      .catch((err, $) => {
        this.props.history.push('/')
        return Observable.empty()
      })
      .subscribe(({ name }) => {
          this.props.store.setSearch(name)
          this.props.store.setHideDropdown(true)
        }
      })
    this.props.store.setSlug(this.props.match.params.slug)
  }

Works 100% on Chrome.
Breaks sometimes on safari & firefox.
Breaks consistently on iOS safari.

Used app dependencies:

"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"mobx": "^4.2.1",
"mobx-react": "^5.1.2",
"mobx-utils": "^4.0.1",

Any ideas what cause the problem?

[mweststrate]

Nope, best create a minimal test case in a sandbox first Op vr 1 jun. 2018 om 05:07 schreef Niko Zbiegien <notifications@github.com>:

…

Hi, I'm getting Error using toStream function. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. [image: screen shot 2018-06-01 at 12 54 10] <https://user-images.githubusercontent.com/7630720/40818554-fc8c86ce-659a-11e8-86f9-ea811778f468.png> Code: (breaks on *Observable.from*) componentDidMount() { this.sub$ = Observable.from(toStream(() => this.props.store.slug)) .switchMap(slug => fetchSlug(slug)) .catch((err, $) => { this.props.history.push('/') return Observable.empty() }) .subscribe(({ id, name }) => { this.props.store.setSearch(name) this.props.store.setHideDropdown(true) } }) this.props.store.setSlug(this.props.match.params.slug) } Works 100% on Chrome. Breaks sometimes on safari & firefox. Breaks consistently on iOS safari. Used app dependencies: "rxjs": "^6.2.0", "rxjs-compat": "^6.2.0", "mobx": "^4.2.1", "mobx-react": "^5.1.2", "mobx-utils": "^4.0.1", Fixed after downgrouding rxjs to the same as in the mobx-utils "rxjs": "^5.0.2", Any ideas what might cause the problem? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#131>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhEKAh1gS_1dPdetu-0cYOHMylpPfks5t4K_9gaJpZM4UWB67> .

[WearyMonkey]

Just got hit by this. Can confirm it's not a mobx-utils bug, but https://github.com/benlesh/symbol-observable being a non-pure pony.

We're using symbol-observable (via redux), Rxjs and mobx-utils.

The behaviour in our build was:

1. Rxjs ponyfill imported, Symbol.observable not available so '@@observable' used.
2. symbol-observable imported via redux, Symbol.observable set.
3. mobx-utils imported, Symbol.observable is now available so used.

Rxjs and mobx-util observables are no longer compatible with each other.

Related: benlesh/symbol-observable#38

Work around:
Import symbol-observable before all other modules.

[tukwan]

@WearyMonkey
I've solved it by using .create rxjs method.

import { computed } from 'mobx'
import { Observable } from 'rxjs/Observable'
import { Observer } from 'rxjs/Observer'

export const toStream = <T>(expression: () => T): Observable<T> =>
  Observable.create((observer: Observer<T>) => {
    const computedValue = computed(expression)
    return computedValue.observe(change => observer.next(change.newValue))
  })

[TimonVS]

I've created a Stackblitz to reproduce the issue: https://stackblitz.com/edit/typescript-5le5kn?file=index.ts (make sure to open the console). See #300 (comment) for more context.