Can not import realm web-sdk into vanilla JS application

The documentation suggests:

Near the top of any JavaScript or TypeScript file that uses Realm, add the following import statement:

import * as RealmWeb from "realm-web";

However this is not valid Javascript and can not be interpreted by any ES6 compatible browser.
Bundlers like Rollup treat node modules as external dependencies and thus don’t resolve the sdk, leaving the import as is which results in an error in the browser.

Is it possible to include the SDK via script tag or by importing all required modules from a single esm js file rather than using npm?

The example assumes that your using a bundler like WebPack, Parcel.js or Rollup.js that understand ES6 modules and resolvese these dependencies before they reach an end-users browser.

We’re currently working on releasing Realm Web in a self-executing function (‘iife’) format, which can be included in the package as well as uploaded to a CDN for direct consumption by end users via a URL. Would either of these work in your situation?

2 Likes

Thank you for clarifying! IIFE would be ideal for our purposes. Do you have an ETA?

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.

Hi – You can follow phase 2 of the Web SDK (which includes this improvement).

Even better is https://github.com/realm/realm-js/issues/2966, which is this specific task of publishing the IIFE.

Also @veysi_yalcin, will you be copying this bundle into your own dist directory before publishing your app or are you looking to load it using a script-tag with a src attribute referencing the script on an external HTTP server / CDN?

1 Like

An official CDN link from your end would be ideal.

Kind of like Stitch:
https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js

Have you considered something like https://www.jsdelivr.com/ ?
This would allow us to pull the latest version directly from your github and the CDN is much faster than amazon s3 storage and requires minimal setup on your end…