SolidJSS
SolidJS•12mo ago
Your name's not...

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


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/solid-js@1.9.3/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!
Was this page helpful?