Your name's not...
Your name's not...
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