Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

compiler rc.18: SSR template validation rejects SVG <image> outside an <svg>-rooted template

Chiusa
  • Qualcosa non va?
#4,241 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
53/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, typescript
Ambito
backend, web-dev

Direzione di ricerca

The report identifies SSR template validation as the failing path but names no source or test files. Start by comparing how DOM and SSR validation establish SVG context, then reproduce with the four supplied cases using transform with generate: 'ssr' and validate: true. Done means all four compile for SSR as they do for DOM, with the validation tests covering SVG roots, fragments, control flow, and nested SVG context.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Describe the bug

@solidjs/[email protected] (#4238, "validate SSR templates for malformed HTML") rejects an SVG <image> in an SSR template unless the template itself is rooted at <svg>. The DOM compile of the same source passes, so the SSR validator does not apply the SVG context the DOM validator does: it parses <image> as HTML, where the parser turns it into <img>.

This breaks any SSR'd component that puts an <image> under control flow (<Show>, <For>), in a fragment, or under a <g> template root, even when it is inside an <svg> in the parent template.

Reproduction
const { transform } = require('@solidjs/compiler') // 2.0.0-rc.18
const cases = {
  showInSvg: "import {Show} from 'solid-js'; export const A = (p) => <svg><Show when={p.on}><image href='a.png' /></Show></svg>",
  gRoot: "export const B = () => <g><image href='a.png' /></g>",
  fragment: "export const C = () => <><clipPath id='c'><circle r={1} /></clipPath><image href='a.png' /></>",
  svgRoot: "export const D = () => <svg><image href='a.png' /></svg>",
}
for (const [name, code] of Object.entries(cases))
  for (const generate of ['dom', 'ssr'])
    try { transform(code, { filename: 'x.tsx', generate, hydratable: true, validate: true }); console.log(name, generate, 'ok') }
    catch (e) { console.log(name, generate, 'ERR', String(e.message).split('\n')[0]) }

Output:

showInSvg dom ok
showInSvg ssr ERR The HTML provided is malformed and will yield unexpected output when evaluated by a browser. (1:79)
gRoot dom ok      / gRoot ssr ERR ...
fragment dom ok   / fragment ssr ERR ...
svgRoot dom ok    / svgRoot ssr ok

User HTML:    <image></image>
Browser HTML: <img>
Expected

The SSR validator treats a template as SVG under the same rules as the DOM validator (an SVG element name at the template root, or a template inside an <svg> element's subtree), so the four cases compile for ssr exactly as they do for dom.

Environment

solid-js / @solidjs/web / @solidjs/compiler 2.0.0-rc.18, @solidjs/vite-plugin 3.0.0-next.51. Found while qualifying rc.18 for celados/glaze (its SSR gate renders a block whose crest is an SVG <image> under <Show>).

Lingua principale
TypeScript
Stelle
36.2k
Fork
1.1k
Merge medio
11h
PR unite (30g)
343

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di solidjs/solid

Tutte le issue di solidjs/solid

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.