Summary
During SSR, a nullish child passed to a closing meta element is serialized as literal text. In particular, <Title>{undefined}</Title> produces <title>undefined</title> instead of an empty title.
This is the current, framework-independent core of solidjs/solid-start#1881. The reproduction does not use SolidStart, routing, prerendering, or asynchronous data.
Reproduction
https://github.com/birkskyum/repro-solid-meta-nullish-ssr
git clone https://github.com/birkskyum/repro-solid-meta-nullish-ssr.git
cd repro-solid-meta-nullish-ssr
pnpm install
pnpm repro
Minimal component:
import { MetaProvider, Title } from "@solidjs/meta";
import { renderToString } from "solid-js/web";
const html = renderToString(() => (
<html>
<head />
<body>
<MetaProvider>
<Title>{undefined}</Title>
</MetaProvider>
</body>
</html>
));Actual
<html data-hk="0"><head><title data-sm="2000">undefined</title></head><body></body></html>
Expected
<html data-hk="0"><head><title data-sm="2000"></title></head><body></body></html>
Cause
renderTags passes the nullish value through escape and then interpolates the result into a template literal. escape(undefined) returns undefined, which template interpolation converts to the string "undefined".
Normalizing the result of flattenChildren with ?? "" before choosing the escaped or unescaped branch avoids stringifying both undefined and null, while preserving valid falsy values such as 0 and false.
Scope
This issue is specifically about serialization of a nullish value. If a title depends on asynchronous route data, the render must still wait for that data (for example with deferStream). The correct output for data that is still unresolved when the shell flushes is an empty title, not the literal word undefined.
Versions
@solidjs/meta@0.29.4solid-js@1.9.15vite-plugin-solid@2.11.14vite@8.2.1
Related older falsy-title report: #26
Downstream report: solidjs/solid-start#1881
Proposed fix: #71
Summary
During SSR, a nullish child passed to a closing meta element is serialized as literal text. In particular,
<Title>{undefined}</Title>produces<title>undefined</title>instead of an empty title.This is the current, framework-independent core of solidjs/solid-start#1881. The reproduction does not use SolidStart, routing, prerendering, or asynchronous data.
Reproduction
https://github.com/birkskyum/repro-solid-meta-nullish-ssr
git clone https://github.com/birkskyum/repro-solid-meta-nullish-ssr.git cd repro-solid-meta-nullish-ssr pnpm install pnpm reproMinimal component:
Actual
Expected
Cause
renderTagspasses the nullish value throughescapeand then interpolates the result into a template literal.escape(undefined)returnsundefined, which template interpolation converts to the string"undefined".Normalizing the result of
flattenChildrenwith?? ""before choosing the escaped or unescaped branch avoids stringifying bothundefinedandnull, while preserving valid falsy values such as0andfalse.Scope
This issue is specifically about serialization of a nullish value. If a title depends on asynchronous route data, the render must still wait for that data (for example with
deferStream). The correct output for data that is still unresolved when the shell flushes is an empty title, not the literal wordundefined.Versions
@solidjs/meta@0.29.4solid-js@1.9.15vite-plugin-solid@2.11.14vite@8.2.1Related older falsy-title report: #26
Downstream report: solidjs/solid-start#1881
Proposed fix: #71