createUniqueId in Toaster causes issues with solid-start
aminya opened this issue · 6 comments
When using the Toaster in solid-start, the following error is given:
createUniqueId cannot be used under non-hydrating context
After debugging this, I found that the error is thrown from the following line:
https://github.com/lxsmnsyc/solid-headless/blob/3844f9a58dcc2698090eb242635a2715a73741df/packages/solid-headless/src/components/toast/Toaster.ts#L27
The original error is given here:
https://github.com/solidjs/solid/blob/19e63798990be0f40b27a5ddd58fe3af837d818a/packages/solid/src/server/rendering.ts#L68
I would have to say createUniqueId
isn't the origin of the issue, it is where Toaster
is used. Would be interesting to see how you are using the Toaster
component and let's figure out how to solve it.
After debugging this further, the issue seems to be that the Toaster
is being used under a MyContext.Provider
, which is created from a context.
Here is what the code looks like:
import { Toaster } from "solid-headless"
import { createContext } from "solid-js"
interface MyContextType {
myMethod: () => void
}
const defaultMyContext = {
myMethod: () => {
}
}
const MyContext = createContext<MyContextType>(defaultMyContext);
export function MyToasterProvider(props) {
const myMethod = () => {
// doing things
};
return (<MyContext.Provider
value={{
myMethod
}}
>
{props.children}
<Toaster/>
</MyContext.Provider>)
}
I don't expect this to produce the issue either. Probably related to the siblings or the parent of MyToasterProvider
I'm also seeing this error when trying to render a RadioGroup
with Solid and Astro. When I change the directive on the Solid component from client:load
to client:only
the component works, meaning there is an issue with server-side rendering these components.
I've experienced this myself so I think I've already found the exact issue as to why this happens.
Apparently Astro will mistakenly load SolidJS twice (due to Vite's module resolution) so it will think that solid-headless components were being rendered outside of a SolidJS root. I don't know how to fix this exactly, because I'm convinced that this is either an Astro issue or a Vite issue.
I've created a relevant issue thread at Astro: withastro/astro#6709
I've still yet to reproduce this issue in SolidStart