How to bring RxJS 6 into your browser?

Question

How to bring RxJS 6 into your browser?

With the widespread support for JavaScript modules in all modern browsers, I am experimenting with importing code directly in the browser using import. Utilizing unpkg.com for npm modules and exploring the jspm project that converts npm modules into a format compatible with browsers.

However, I am encountering challenges, particularly with RxJS. RxJS version 6 suggests importing constructors and operators as follows:

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

Attempting to do this in the browser results in errors like:

Uncaught SyntaxError: The requested module '' does not provide an export named 'map'

To work around this, I can import the entire rxjs module and extract what is necessary:

import rxjs from 'https://dev.jspm.io/rxjs@6';
const { Observable } = rxjs;
import operators from 'https://dev.jspm.io/rxjs@6/operators';
const { map } = operators;

Nonetheless, this goes against the effort by the Rx team to optimize bundle size.

This issue extends beyond just RxJS. What steps should we take moving forward to achieve our goal of seamlessly transitioning our development javascript imports in the browser to meet bundler requirements?

javascript npm rxjs jspm unpkg

Answer 1

Answer №1

Check out this quick and easy example starter stackblitz using rxjs:

https://stackblitz.com/edit/js-gm1qso

To get started, make sure to include the rxjs js file in your script (you can grab it from a CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

All functionalities are accessed through the rxjs namespace, here's a simple usage example:

rxjs.of(1, 2, 3)
  .subscribe(x => {
    const element = document.createElement('div');
    element.innerText = 'Data: ' + x;
    document.body.appendChild(element);
  },
  err => { },
  () => {
    const element = document.createElement('div');
    element.innerText = 'All done';
    document.body.appendChild(element);
  });

Answer 2

Check out this quick and easy example starter stackblitz using rxjs:

https://stackblitz.com/edit/js-gm1qso

To get started, make sure to include the rxjs js file in your script (you can grab it from a CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.js">

All functionalities are accessed through the rxjs namespace, here's a simple usage example:

rxjs.of(1, 2, 3)
  .subscribe(x => {
    const element = document.createElement('div');
    element.innerText = 'Data: ' + x;
    document.body.appendChild(element);
  },
  err => { },
  () => {
    const element = document.createElement('div');
    element.innerText = 'All done';
    document.body.appendChild(element);
  });

Answer 3

Answer №2

To access the es6 module export syntax, you must navigate to the subfolder named _esm2015. Therefore, the following imports are necessary:

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

Unfortunately, simply installing rxjs with npm install rxjs@6 and then using import in the browser is not possible. This is because the distribution source lacks the file extension .js in the import statements: https://unpkg.com/@reactivex/[email protected]/dist/esm2015/index.js.

Currently, the browser requires file extensions for import (more information can be found here: https://developers.google.com/web/fundamentals/primers/modules#specifiers):

// Not supported (yet):
import {shout} from 'jquery';
import {shout} from 'lib.mjs';
import {shout} from 'modules/lib.mjs';

// Supported:
import {shout} from './lib.mjs';
import {shout} from '../lib.mjs';
import {shout} from '/modules/lib.mjs';
import {shout} from 'https://simple.example/modules/lib.mjs';

An issue regarding this matter has been raised: https://github.com/ReactiveX/rxjs/issues/4416.

Side note: will redirect to

Currently, it is recommended to utilize or create your own bundle (such as using rollup as suggested by @Ovidiu Dolha).

Answer 4

To access the es6 module export syntax, you must navigate to the subfolder named _esm2015. Therefore, the following imports are necessary:

import { Observable, Subject, ReplaySubject, from, of, range } from 'https://dev.jspm.io/rxjs@6/_esm2015';
import { map, filter, switchMap } from 'https://dev.jspm.io/rxjs@6/_esm2015/operators';

Unfortunately, simply installing rxjs with npm install rxjs@6 and then using import in the browser is not possible. This is because the distribution source lacks the file extension .js in the import statements: https://unpkg.com/@reactivex/[email protected]/dist/esm2015/index.js.

Currently, the browser requires file extensions for import (more information can be found here: https://developers.google.com/web/fundamentals/primers/modules#specifiers):

// Not supported (yet):
import {shout} from 'jquery';
import {shout} from 'lib.mjs';
import {shout} from 'modules/lib.mjs';

// Supported:
import {shout} from './lib.mjs';
import {shout} from '../lib.mjs';
import {shout} from '/modules/lib.mjs';
import {shout} from 'https://simple.example/modules/lib.mjs';

An issue regarding this matter has been raised: https://github.com/ReactiveX/rxjs/issues/4416.

Side note: will redirect to

Currently, it is recommended to utilize or create your own bundle (such as using rollup as suggested by @Ovidiu Dolha).

Answer 5

Answer №3

var btn = document.querySelector("button");

var clickObs = rxjs.fromEvent(btn, "click");

var intervalObs = rxjs.interval(1000);

// intervalObs.subscribe((value) => {
//   console.log(value);
// });

clickObs.pipe(rxjs.switchMap(() => intervalObs)).subscribe((value) => console.log(value));

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page Title</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62101a081122554c5a4c53">[email protected]</a>/dist/bundles/rxjs.umd.min.js"></script>
        <script defer src='main.js'></script>
    </head>

    <body>
        <button id="btn">
            Click Me
        </button>
    </body>

    </html>

Answer 6

var btn = document.querySelector("button");

var clickObs = rxjs.fromEvent(btn, "click");

var intervalObs = rxjs.interval(1000);

// intervalObs.subscribe((value) => {
//   console.log(value);
// });

clickObs.pipe(rxjs.switchMap(() => intervalObs)).subscribe((value) => console.log(value));

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Page Title</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62101a081122554c5a4c53">[email protected]</a>/dist/bundles/rxjs.umd.min.js"></script>
        <script defer src='main.js'></script>
    </head>

    <body>
        <button id="btn">
            Click Me
        </button>
    </body>

    </html>

How to bring RxJS 6 into your browser?

Answer №1

Answer №2

Answer №3

Similar questions

Clicking on the react router does not trigger any action

When a JavaScript/jQuery open window popup triggers the onunload event after the about:blank page has been

The jQuery autocomplete feature with typeahead suggestions fails to appear following a successful AJAX request

XMLHttpRequest problem: receiving status code 0 from both local and live server

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

Tips for updating a single parameter with vue router-link

Does the 'a' HTML tag secretly trigger window.location.assign?

Finding Corresponding Values in an Array with JavaScript

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

Passing data from input to Angular's $scope (filter)

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Is there a way to retrieve time data from a different server through AJAX?

Extract data from an ajax request in an AngularJS directive and send it to the controller

The babelrc configuration alone is not enough to be used in conjunction with the babel --

send another response following the completion of the request.end()

Issue: Attempting to display array elements within a React Functional Component?

What could be causing this code to fail in making changes to the HTML document?

Thumbnail Reactive Player

The toggle function for the hamburger icon is currently malfunctioning

Troubles with data tables, pagination, and selecting rows