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

Build a Solid App
1

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?

1 Like
2

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.

1 Like
3

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

1 Like
4

I ended up not using the library and doing the fetching and parsing myself. :disappointed:

1 Like
5

@Potherca the easyest way i’ve found is to use vuejs components for all my apps,

videos in french but you could have english subtitles :

then you can create a Login.vue component game-sync/Login.vue at main · scenaristeur/game-sync · GitHub

with functions stored in /plugins game-sync/solid-sync.js at cff91b26f459005d274045c2227c6fb2a758c850 · scenaristeur/game-sync · GitHub

image
image1600×900 107 KB

and you can reuse your component in many apps
like booklice
or game-sync

you can build your app and host it for free on github pages (gh-pages branch)

If you need more info, let me know

1 Like