Observable.fromEvent is not a function - RxJS

Question

I would like to use RxJS without Angular or Webpack. I just included RxJS 7 from a CDN. This is what I tried:

const { Observable } = rxjs;

const clicks = Observable.fromEvent(document, 'click');

clicks.subscribe(ev => console.log(ev))

I get this error:

Uncaught TypeError: Observable.fromEvent is not a function

My html code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.3.0/rxjs.umd.js" integrity="sha512-1Jz97rlEAHdMk6x3UWesQaEOhSZ3iG82PkqNr3N4bj/hqKaVQDPTeHW0//vU1ucY+pB5sZr5uNz1aO2qO5XkMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="demo.js"></script>
</head>
<body>
    demo
</body>
</html>

There is a similar question, but that is different, because it uses Angular, but I don't use any build system, just include it from a CDN.

What do I wrong? How to use Observable.fromEvent?

Amer · Accepted Answer · 2021-09-03T15:41:05.200

4

Starting from RxJS@6, fromEvent function is not a part of the Observable class, and instead, you need to use it directly from rxjs.

Try the following:

const { Observable, fromEvent } = rxjs;

const clicks = fromEvent(document, 'click');

clicks.subscribe(ev => console.log(ev));

edited Sep 03 '21 at 15:41

answered Sep 03 '21 at 14:49

Amer

6,162
2
8
34

Joshua McCarthy · Answer 2 · 2021-09-03T14:52:54.620

1

Import fromEvent and use that directly instead of importing Observable.

import { fromEvent } from 'rxjs';

Edit: my apologies as I forgot you are in the browser side. Using the CDN will declare the global variable rxjs so you should use rxjs.fromEvent.

edited Sep 03 '21 at 14:52

answered Sep 03 '21 at 14:45

Joshua McCarthy

1,739
1
9
6

I use it in plain html+js. There is no import statement: `Uncaught SyntaxError: Cannot use import statement outside a module` – Iter Ator Sep 03 '21 at 14:47

score -1 · Answer 3 · answered Mar 13 '23 at 15:42

-1

Use rxjs version 5.x or update your imports

answered Mar 13 '23 at 15:42

Alfredo Tavares

147
1
4

Observable.fromEvent is not a function - RxJS

3 Answers3