Your name's not... Posts - Answer Overflow

Your name's not...

•Created by Your name's not... on 4/27/2025 in #support

Async route guards in Solid Router, and serverside props (not using SolidStart)

I'm building something very similar to Interia.js with a Go backend and a Solid frontend. Pages are rendered by a Node process that uses renderToStringAsync, and clientside pages are hydrated. See below for the rest of the thread.

8 replies

SSolidJS

•Created by Your name's not... on 12/24/2024 in #support

How to better handle resource errors when component is instantiated outside of the render function?

Hello, merry (early) Christmas! I have a somewhat unorthodox application with an SSR entrypoint that currently uses renderToStringAsync() to render an application. In hindsight, it was obviously problematic, but at the time, I was tearing my hair out trying to figure out why my application was having an internal error. This was my rendering code:

export async function render(uri: string, req: RenderRequest): Promise<{ html: RenderStream, head?: RenderStream }> {
    const [lang,] = await loadTranslationsForLanguage(req.common!.requestLanguage)

    const common = req.common!

    const ctx = new AppCtx(common.selfContext?.user ?? null, common, lang)

    const comp = <App ctx={ctx} uri={uri} pageCommon={req.common!} pagePayload={req.payload!.value!} />
    // ^ This was problematic because it wasn't inside the function in renderToStream.
    // Nevertheless, there was no warning and the runtime error was confusing and did not allude to the core issue.

    const html = renderToStream(() => comp)

    return { html }
}

export async function render(uri: string, req: RenderRequest): Promise<{ html: RenderStream, head?: RenderStream }> {
    const [lang,] = await loadTranslationsForLanguage(req.common!.requestLanguage)

    const common = req.common!

    const ctx = new AppCtx(common.selfContext?.user ?? null, common, lang)

    const comp = <App ctx={ctx} uri={uri} pageCommon={req.common!} pagePayload={req.payload!.value!} />
    // ^ This was problematic because it wasn't inside the function in renderToStream.
    // Nevertheless, there was no warning and the runtime error was confusing and did not allude to the core issue.

    const html = renderToStream(() => comp)

    return { html }
}

It ran properly up until I introduced a lazy() component into my router. When I did, my SSR code immediately began throwing this error:

TypeError: Cannot read properties of undefined (reading 'id')
    at wrap (file://.../node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:610:37)

TypeError: Cannot read properties of undefined (reading 'id')
    at wrap (file://.../node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:610:37)

At first I thought this was due to my use of createContext somewhere else, but removing it changed nothing. Only until I started searching threads here did I realize what the problem was. I'm sure that this is addressed in the library's documentation somewhere, but it has been years since I first learned Solid, so I haven't gone through the docs from the beginning for a very long time. I understand why this problem occurs, but I believe I could have saved hours of my (and others') time if there was an easy way to warn about components rendered outside of a render tree. Have a good day!

1 replies

Gaming

Programming