extractCss() called in browser throws error

[Brian Takita]

extractCss should be called in SSR (isServer).

<Show when={isServer}><style id="_goober">${extractCss()}</style></Show>

When extractCss is run in the browser, an error is thrown.

Uncaught TypeError: Cannot read properties of null (reading 'nextSibling')
    at Object.get children [as children] (root.tsx:15)
    at Object.get children [as children] (client.tsx:13)
    at Object.get children [as children] (components.jsx:11)
    at Object.fn (solid.js:848)
    at runComputation (solid.js:593)
    at updateComputation (solid.js:578)
    at createMemo (solid.js:216)
    at children (solid.js:498)
    at solid.js:848
    at untrack (solid.js:401)

Perhaps a better error message or warning is in order?

[Ryan Carniato]

This is the walks breaking in the underlying compilation. Not really easy to detect this sort of error. I'm unclear why it is happening so likely there is a bug here somewhere.

[Richard CMK]

Compiling JSX to JS makes this easier to understand:

createElement(
  Show,
  { when: isServer },
  createElement("style", { id: "_goober" }, "$", extractCss())
);

extractCss is called whether isServer is true or false. I guess you intended to call extractCss() on the client and expect a better error message?
Is extractCss expected to be universal/isomorphic?

[Ryan Carniato]

That's not Solid's transform. That looks like you are using TypeScript or React's compiler. We evaluate lazily. extractCss generally is inserted in the string markup. If JSX from document I recommend the <Asset> tag.