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

**URL:** <https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662>\
**Category:** Build a Solid App\
**Created:** [September 14, 2021, 7:53am UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662 "2021-09-14T07:53:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Potherca](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/potherca/32/1761_2.png) [@Potherca](https://forum.solidproject.org/u/Potherca)\
**Post date:** [September 14, 2021, 7:53am UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662/1 "2021-09-14T07:53:37Z")

</div>

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:

```auto
<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:

```auto
<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](https://github.com/inrupt/solid-client-js/issues/1247)). 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?**

---

<div class="post-metadata">

**Author:** ![Vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@Vincent](https://forum.solidproject.org/u/Vincent)\
**Post date:** [September 14, 2021, 9:08am UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662/2 "2021-09-14T09:08:17Z")

</div>

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

n3, one of its dependencies, unfortunately does [some weird stuff](https://github.com/rdfjs/N3.js/issues/196) 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.

---

<div class="post-metadata">

**Author:** ![Potherca](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/potherca/32/1761_2.png) [@Potherca](https://forum.solidproject.org/u/Potherca)\
**Post date:** [September 14, 2021, 12:56pm UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662/3 "2021-09-14T12:56:30Z")

</div>

Yeah, I ran across [the `loadN3` function in `inrupt/solid-client-js`](https://github.com/inrupt/solid-client-js/blob/HEAD/src/formats/turtle.ts#L91-L113). 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…

```js
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

---

<div class="post-metadata">

**Author:** ![Potherca](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/potherca/32/1761_2.png) [@Potherca](https://forum.solidproject.org/u/Potherca)\
**Post date:** [September 30, 2021, 8:52am UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662/4 "2021-09-30T08:52:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Smag0](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/smag0/32/310_2.png) [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [October 1, 2021, 9:37pm UTC](https://forum.solidproject.org/t/how-to-get-inrupt-solid-client-to-work-in-the-browser/4662/5 "2021-10-01T21:37:56Z")

</div>

@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 :

- set up your nodejs / vue-cli environnement  
[Formation gratuite : Votre environnement de developpement vuejs / nodejs - YouTube](https://youtu.be/KvzmOlxaAWo)
- your first component  
[https://youtu.be/\_2cZ3u7jznc](https://youtu.be/_2cZ3u7jznc)
- another tuto in english with solid-file-client and ldflex but the idea is quite the same [Portfolio : How to create a Vuejs Portfolio App on Solid](https://spoggy-test6.solidcommunity.net/public/blog/portfolio.html)  
you can add all @inrupt npm modules with  
`npm install @inrupt/the_module_name`  
and build a login component

then you can create a Login.vue component [game-sync/Login.vue at main · scenaristeur/game-sync · GitHub](https://github.com/scenaristeur/game-sync/blob/main/src/components/solid/Login.vue)

with functions stored in /plugins [game-sync/solid-sync.js at cff91b26f459005d274045c2227c6fb2a758c850 · scenaristeur/game-sync · GitHub](https://github.com/scenaristeur/game-sync/blob/cff91b26f459005d274045c2227c6fb2a758c850/src/plugins/solid-sync.js#L285)

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/2X/f/f8fbf6cdc531130111e17b7b3395da665d643695.png)

and you can reuse your component in many apps  
like [booklice](https://scenaristeur.github.io/booklice/)  
or [game-sync](https://scenaristeur.github.io/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