Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ssr] breaks when using expressions in `<title>` and `<html>` tags

See original GitHub issue

Description

A clear and concise description of what the bug is.

Steps to Reproduce

Write this code in test.js

import { Readable } from "stream";
import { render } from "@lit-labs/ssr/lib/render-with-global-dom-shim.js";
import { html } from 'lit-html';

const template = ({ title }) => html`
  <html>
    <head>
      <!-- remove the next line and it works -->
      <title>${title}</title>
    </head>
    <body>
      <p>${title}</p>
    </body>
  </html>
`;

const ssrResult = render(template({ title: "hello" }));



/***** HELPERS */
const stream = Readable.from(ssrResult);
const ssrString = await streamToString(stream);

console.log(ssrString);

function streamToString(stream) {
  const chunks = [];
  return new Promise((resolve, reject) => {
    stream.on("data", (chunk) => chunks.push(Buffer.from(chunk)));
    stream.on("error", (err) => reject(err));
    stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
  });
}

execute it via node test.js

Expected Results

the ssr output

Actual Results

$ node test.js
node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

Error: unexpected final partIndex: 1 !== 2
    at renderTemplateResult (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:514:15)
    at renderTemplateResult.next (<anonymous>)
    at renderValue (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:354:16)
    at renderValue.next (<anonymous>)
    at render (file:///html/test-ssr/node_modules/@lit-labs/ssr/lib/render-lit-html.js:336:12)
    at render.next (<anonymous>)
    at next (node:internal/streams/from:86:20)
    at Readable.readable._read (node:internal/streams/from:53:7)
    at Readable.read (node:internal/streams/readable:487:10)
    at flow (node:internal/streams/readable:1012:34)

Browsers Affected

Node 17
Node 16

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:13 (13 by maintainers)

Top GitHub Comments

1reaction

justinfagnanicommented, Jan 26, 2022

@aomarks I can fix <title> real quick

0reactions

daKmoRcommented, Jan 28, 2022

ok, I have a rather simple workaround… (at least for a static site generator) which I think would be ok as an end-user API

so for tags like html, body, ... you do NOT use them in the template but instead, you use <*-server-only>.

so a page template would look something like this

render(data) {
  return html`
    <!DOCTYPE html>
    <html-server-only lang="${data.lang}">
      <head>...</head>
      <body-server-only class=${classMap(data.cssClasses)}>
        ${data.content()}
      </body-server-only>
    </html-server-only>
  `;
}

with that, the lit ssr rendering works as expected and before we actually save the file to disk we remove the -server-only from the tags.

this probably means you can NOT hydrate templates if they or their sub-templates are using a <*-server-only> tag - which is imho reasonable and could be explained once in a generic section.

that is good enough for me for now 🤗

if lit could update a full html page if new data or new templates get rendered… then it would enable SPA like navigation by sending a new template result and rendering it… might be interesting but probably a different issue/discussion