RXJS operators are not functions - vue.js

Question

I am getting this error when I try to use rxjs in vue using vue-rx with rxjs.
[Vue warn]: Error in created hook: "TypeError: messageObservable.fromEvent(...).map(...).debounceTime is not a function"
I do not see any wrong imports from the documentation that I looked at and I am not getting any build errors when building the JS on my dev enviroment.
THese are the imports that I have
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
This is the fucntions calling these mehtods.
const messageObservable = Observable;
subscriptions(){
message$: messageObservable
},
created(){
message$.
fromEvent(document.querySelector('textarea'), 'input').
map(event => event.target.value).
debounceTime(500).
distinctUntilChanged().
subscribe({
next: function(value) {
console.log(value);
}
});
},

Answer 1

It seems that the tutorial you are following along is out to date. This imports are not longer working. (see changelog)
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
The latest and stable version is rxjs6. This is the correct way of using it:
import { fromEvent, map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'
import { Observable } from 'rxjs';
...
created() {
message$.
pipe(
map(event => event.target.value),
debounceTime(500),
distinctUntilChanged()
).subscribe(console.log);
}
I am guessing this is how you want to use fromEvent.
created() {
message$.
pipe(
switchMap(val => fromEvent(document.querySelector('textarea'), 'input'))
map(event => event.target.value),
debounceTime(500),
distinctUntilChanged()
).subscribe(console.log);
}