How to get `@inrupt/solid-client` to work in the browser?

Hi! I’m trying to get some of the @inrupt client libraries to work in the browser, without the need for a webpack build step. The idea is for developers to just include the code from a CDN.


I’ve had no issues with @inrupt/solid-client-authn-browser.

The static include from the bundled JS works:

<script src="https://cdn.jsdelivr.net/npm/@inrupt/solid-client-authn-browser/dist/solid-client-authn.bundle.js"></script>
<script>
  const session = solidClientAuthentication.getDefaultSession()
</script>

The dynamic include as module also works perfectly:

<script type="module">
  import { getDefaultSession } from 'https://cdn.skypack.dev/@inrupt/solid-client-authn-browser'
  const session = getDefaultSession()
</script>

However, now I am trying to get @inrupt/solid-client to work and I am running into issues.

My issues:

  1. There doesn’t seem to be a bundled version (to statically load through a CDN). Is there one and am I just not seeing it? Or is no browser bundle available?

  2. When trying to load the library dynamically as a module, I get a "@rdfjs/data-model" no dependency version info found error. This seems to be easy to fix (I’ve opened an issue at the inrupt/solid-client-js repo). But when the dependency is resolved I get a Uncaught (in promise) TypeError: n3 is null error.

I’m beginning to run out of things to try… Does anyone have any ideas how I can get @inrupt/solid-client to work in the browser?

solid-client doesn’t provide its own browser build, but unpkg.com bundles published modules so you could try that: https://unpkg.com/@inrupt/solid-client@1.12.0/dist/index.js

n3, one of its dependencies, unfortunately does some weird stuff that requires a horrible workaround in solid-client that I can imagine interferes with dynamic imports/skypack, so hopefully the unpkg version works for you.

Yeah, I ran across the loadN3 function in inrupt/solid-client-js. I was afraid it might be related to my issues.

I’ve tried compiling my own bundle for the browser, but that opens a whole new typescript- and webpack-config related can of worms.

Sadly, the bundled JS code from a CDN also does not seem to be meant for the browser…

async function loadN3() {
    // ... see https://github.com/rdfjs/N3.js/issues/196
    const n3Module = await Promise.resolve().then(function () { 
        return _interopNamespace(require('n3')); 
    });
    if (typeof n3Module.default !== "undefined") {
        return n3Module.default;
    }
    return n3Module;
}

When I try to load it I get the (by now familiar):

Uncaught ReferenceError: exports is not defined

or, when exports is defined:

Uncaught ReferenceError: require is not defined