Does suid work with solid start?

[nxy7]

When running solid start with suid I either get

TypeError: suidPlugin is not a function

when trying to include it in vite build or

ReferenceError: document is not defined

if I use any suid component in the app. To reproduce use starter solid start template

pnpm create solid

and then add suid dependencies.

[atzzCokeK]

the same thing happens to me. I am not sure if it works.

[JohanHeyvaert]

Mmmmm, same problem here.

 solid-start dev 
 version  0.2.5
failed to load config from C:\Dev\solid-poc\vite.config.ts
file:///C:/Dev/solid-poc/vite.config.ts.timestamp-1668420203153.mjs:6
  plugins: [suidPlugin(), solid()]
            ^

TypeError: suidPlugin is not a function

Package.json:

  "devDependencies": {
    "solid-start-node": "^0.2.0",
    "typescript": "^4.8.4",
    "vite": "^3.1.8"
  },
  "dependencies": {
    "@solid-primitives/i18n": "^1.1.2",
    "@solidjs/meta": "^0.28.0",
    "@solidjs/router": "^0.5.0",
    "@suid/material": "^0.6.3",
    "@suid/vite-plugin": "^0.0.3",
    "solid-js": "^1.6.0",
    "solid-start": "^0.2.0",
    "undici": "^5.11.0"
  },

vite.config.ts:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import suidPlugin from "@suid/vite-plugin";

export default defineConfig({
  plugins: [suidPlugin(), solid()]
});

Might be something obvious, but I'm new to solid.

[nxy7]

Weird thing is it somehow almost works without suidPlugin(). It throws errors, but if you ignore them a couple times suid elements are actually displayed on the page :P

[demoran23]

The typing on suidPlugin is incorrect. You'll want to reference it as suidPlugin.default().

[juanrgm]

With the latest version (https://github.com/swordev/suid/pull/143) you can use suid with solid-start, but you must disable the SSR.

// vite.config.ts
import suid from "@suid/vite-plugin";
import solid from "solid-start/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [suid(), solid({ ssr: false })],
});

[awojciak]

@juanrgm so, SUID still can't be used with SSR? when SSR-ready version could be released?

[r25s]

Thanks for this great library. I would also like to know if SSR compatibility is on the roadmap.

[juanrgm]

I am adding support to SSR, but it is being locked by this issue (https://github.com/solidjs/solid/issues/1383).

[orenelbaum]

This issue is already resolved, we are just waiting for Ryan to merge the changes he made. If you want to work on it locally until the fix is merged you can just patch the mergeProps function in your node_modules under node_modules\solid-js\dist\server.cjs with this https://github.com/ryansolid/dom-expressions/commit/9d4385463ffa8719b3f22e7962e53fd7f1d30e08

[orenelbaum]

The fix was merged in v1.6.3

[juanrgm]

This is being very hard, there are too random bugs.

Waiting to https://github.com/solidjs/solid-start/issues/523.

[orenelbaum]

It's good that you're finding the bugs, but I understand that it can be annoying. I fixed the bug. If you want to patch node_modules until it's merged you can go to node_modules\solid-js\dist\server.cjs and replace line 302 const v = (sources[i] || {})[key]; with

let s = (sources[i] || {});
if (typeof s === "function") s = s();
const v = s[key];

Generally I can try prioritizing bugs you encounter if that helps, as long as I have free time.

[orenelbaum]

Fix is live now

[damianesteban]

I get the following error with suid and solidstart:

After I refresh the page everything is cool. Any idea how to fix this?

[vivCoding]

I have the same issue as @damianesteban with suid and solidstart (setup described as OP), where I get document is not defined, and then goes away if I "clear errors and retry". The problem persists if I refresh page.

The only thing that seems to fix the issue is disabling SSR on solid-start, as mentioned earlier in this thread (not really ideal).

[damianesteban]

@vivCoding Thank you. Looks like I'll be using Tailwind for my project with SolidStart :)

[IS2511]

With the latest version (#143) you can use suid with solid-start, but you must disable the SSR.

Is SSR support planned? Will SSR support ever be available for SUID? It really bothers me, solid-start supports SSR "out of the box" and an extension breaking it makes me sad.

[juanrgm]

I am working in it.

With @suid/material@0.9.0 there is support partial support for SSR. For example, you can create styled components:

import { styled } from "@suid/material/styles";

const Div = styled('div')({ color: "red" });

But not all components are ready, this requires reviewing each component to adapt it to SSR.

[madaxen86]

I'll just leave my experience here.

1. What I wanted to achieve:

   • Solid Start SSR
   • Using media query "prefers-color-scheme:dark" to set the palette mode prop automatically
   • fallback on server is "light"

2. What happens:

   • first render: the server renders the page in light theme - so far so good.
   • when the client prefers the dark mode the onMount will set the darkMode signal to true -> "dark" So now comes the weird part. The body now has a black background, the text is white for p tags. The buttons and papers (SUID components) still have the light theme colors !? Then I added console logs also in the sx props and they say they use the dark theme but render the light theme !?

Then when I manually change the color scheme to light - light theme is applied correctly, when I switch to dark - dark theme is applied correctly.

Has anyone achieved SSR and using the media query to update the theme on the client?

[rtritto]

There is a guide/template to use suid with SSR?

Like MUI Server rendering, for the cache, should I use Emotion Solid or suid styled engine?

PS: I'm using vite-plugin-ssr

[franckdervaux]

When building a solid-start application with suid, not using SSR, I get the following error: Error [RollupError]: Could not resolve "./ThemeContext" from "node_modules/@suid/system/useTheme.js" I am using suid version 0.15.1 with solid-start 0.3.6.

[hakatashi]

For people struggling using SUID with SolidStart 1.0:

By following getting started guide, I got SyntaxError: Unexpected token 'export' error.

To resolve it, instead of adding vite.config.ts to your project, write app.config.ts like this:

import { defineConfig } from "@solidjs/start/config";
import suidPlugin from "@suid/vite-plugin";

export default defineConfig({
  vite: {
    plugins: [suidPlugin()],
    build: {
      target: "esnext",
    },
  },
});

SSR is apparently working fine.