Import UMD Javascript Modules into Browser

  1. Recently the UMD bundle was renamed to just rxjs, see https://github.com/ReactiveX/rxjs/commit/556c904ea61a8424e5d24f170b20eadbc05d01f0#diff-6d2911fe563068b8126098588db98a84

  2. If you want to use RxJS 6 you need to switch to "pipable" operators (and creation functions), see https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#operator-pipe-syntax

So for example this works:

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script>
rxjs.fromEvent(document, 'click').subscribe(console.log);
</script>

Demo: https://stackblitz.com/edit/rxjs6-demo-r2rtbz?file=index.html


Here's a oneliner to import UMD modules using browser modules and dynamic imports in 2020.

export default async (url, module = {exports:{}}) =>
  (Function('module', 'exports', await (await fetch(url)).text()).call(module, module, module.exports), module).exports

Usage example:

const ednToJS = await importUMD(`https://unpkg.com/[email protected]/dist/main.js`)
const rxjs = await importUMD('https://unpkg.com/[email protected]/bundles/rxjs.umd.js')

tada