SolidJS•15mo ago

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

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

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

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!

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

renderToStringAsync()

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

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

createContext

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

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

Similar Threads

Similar Threads

Similar Threads