Open nxy7 opened 1 year ago
the same thing happens to me. I am not sure if it works.
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.
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
The typing on suidPlugin is incorrect. You'll want to reference it as suidPlugin.default()
.
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 })],
});
@juanrgm so, SUID still can't be used with SSR? when SSR-ready version could be released?
Thanks for this great library. I would also like to know if SSR compatibility is on the roadmap.
I am adding support to SSR, but it is being locked by this issue (https://github.com/solidjs/solid/issues/1383).
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
The fix was merged in v1.6.3
This is being very hard, there are too random bugs.
Waiting to https://github.com/solidjs/solid-start/issues/523.
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.
Fix is live now
I get the following error with suid and solidstart:
After I refresh the page everything is cool. Any idea how to fix this?
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).
@vivCoding Thank you. Looks like I'll be using Tailwind for my project with SolidStart :)
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.
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.
I'll just leave my experience here.
What I wanted to achieve:
What happens:
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?
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
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.
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.
When running solid start with suid I either get
when trying to include it in vite build or
if I use any suid component in the app. To reproduce use starter solid start template
and then add suid dependencies.