How do I enable a SolidJS UI component library to work with SSR in SolidStart

[jsimonrichard]

Minimum Reproducible Example (instructions in README): https://github.com/jsimonrichard/solid-start-ssr-ui-lib-issue

I'm trying to use a SolidJS component library (using Vite) in a SolidStart app, both of which are in a monorepo, but I'm getting the following error:

Really long error

ReferenceError: document is not defined
    at r (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/ui/dist/ui.js:6:17)
    at t (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/ui/dist/ui.js:9:26)
    at c (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/ui/dist/ui.js:13:10)
    at s (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/ui/dist/ui.js:17:10)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at Home (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/website/src/routes/index.tsx?pick=default&pick=$css:23:59)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at Promise.Comp [as resolved] (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/start/dist/router/lazyRoute.js:35:107)
    at wrap (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:583:30)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at Object.outlet (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routing.js:451:53)
    at get children [as children] (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:138:23)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:206:35
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:169:49
    at createMemo (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:88:9)
    at children (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:169:16)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:206:14
    at createMemo (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:88:9)
    at provider (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:201:12)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at children (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:135:49)
    at Show (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:419:68)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at eval (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:130:38)
    at Routes (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:127:51)
    at Module.createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at get children [as children] (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:36:95)
    at get children [as children] (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/@solidjs/router/dist/routers/components.jsx:75:22)
    at get children [as children] (/home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/website/src/app.tsx:19:22)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:662:39
    at catchError (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:144:12)
    at get children [as children] (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:662:16)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:206:35
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:169:49
    at createMemo (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:88:9)
    at children (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:169:16)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:206:14
    at createMemo (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:88:9)
    at provider (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:201:12)
    at createComponent (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:353:15)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:659:34
    at runWithOwner (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:180:12)
    at runSuspense (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:659:12)
    at Object.completed (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:640:19)
    at notifySuspense (file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:615:7)
    at file:///home/jsimonrichard/Trellis/solid-tailwind-component-lib-dep-issue/node_modules/solid-js/dist/server.js:596:9
    at async Promise.allSettled (index 0)

It looks like vite / SolidStart / something is running client-side code on the server. Is that accurate?

How do I enable a UI component library to work with SolidStart SSR?

[davidmatter]

https://vite.dev/config/build-options.html#build-ssr

[jsimonrichard]

Does this mean I need to build two outputs for the component library? One for the client and one for SSR?

[doeixd]

Hello. I'd check out https://github.com/lxsmnsyc/pridepack they have a solid js library template that will set everything up for you.

Looks like some other component libraries are using tsup

https://github.com/kobaltedev/kobalte/blob/main/packages/core/tsup.config.ts
https://github.com/corvudev/corvu/blob/main/packages/accordion/tsup.config.ts