SvelteKit / Vite issues with @inrupt/solid-client

Build a Solid App Solid App Development FAQs
1

Hi :wave:,

I’m new to Solid and trying to implement the First Solid App tutorial in SvelteKit. I can get authentication working but trying to call getSolidDataset from the @inrupt/solid-client package results in the following error and stack trace:

Uncaught (in promise) ReferenceError: global is not defined
    stream src-DPXTNCLZ.js:1790
    __require2 chunk-HTQAWXVB.js:48
    stream src-DPXTNCLZ.js:2788
    __require2 chunk-HTQAWXVB.js:48
    <anonymous> N3Store.js:3
_stream_readable.js:48:20
    parse index.es.js:1796
    AsyncFunctionThrow self-hosted:696
    (Async: async)
    parsingPromise index.es.js:2992
    responseToSolidDataset index.es.js:2947
    AsyncFunctionNext self-hosted:692
    (Async: async)
    getSolidDataset index.es.js:3019
    AsyncFunctionNext self-hosted:692
    (Async: async)
    writeProfile main.js:64
    <anonymous> main.js:142
    (Async: EventListener.handleEvent)
    <anonymous> main.js:140
    InnerModuleEvaluation self-hosted:2371
    evaluation self-hosted:2332

From poking around it looks like it might be related to a dependency of solid-client (possibly readable-stream) only being available as CommonJS rather than ESM and that Vite (which SvelteKit is built around) can’t bundle it properly.

I’ve tried various workarounds including what’s been mentioned in Svelte and Solid but no luck so far and I’m starting to climb the walls, going around in circles.

Anybody have any experience with this and found a solution? Have you tried SvelteKit and Solid @happybeing?

Can’t wait to get over this hurdle and start creating Solid App! Thanks!

2

Remembered @NoelDeMartin was using Vue with Solid, so thought he must’ve tried Vite. After some digging - sure enough he ran into problems with Vite and actually wrote a bit about it in Implementing a Recipes Manager using Solid with some workarounds that apparently worked.

Have yet had the time to investigate fully - but there is hope! :grinning_face_with_smiling_eyes:

Failing that I’ll try a more traditional webpack based Svelte project (not SvelteKit) as it’s all in the browser for the moment anyways.

3

Maybe you should open an issue in their repositories (if there isn’t one about this already).

In case anyone’s wondering about what I did, I don’t have a definite solution, I just have a workaround that is good enough. TLDR: I just bundle problematic dependencies with webpack and use the webpack bundle as an external dependency in itself. You can look at some code here umai/vite.config.ts at main · NoelDeMartin/umai · GitHub