createUniqueId in Toaster causes issues with solid-start

[aminya]

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

[lxsmnsyc]

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.

[aminya]

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>)
}

[lxsmnsyc]

I don't expect this to produce the issue either. Probably related to the siblings or the parent of MyToasterProvider

[markmals]

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.

[lxsmnsyc]

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.

[lxsmnsyc]

I've created a relevant issue thread at Astro: https://github.com/withastro/astro/issues/6709

I've still yet to reproduce this issue in SolidStart