Skip to content

Interweave SSR fails to render if html comment is first element in dom #277

@jmarianski

Description

@jmarianski

Hi, I came to this situation by complete accident when my html code got spliced into 2 segments and somehow first element in one of the components that I wanted to render contained html comment.

Source was like <!--readmore--></p><p>Rest of the page</p>, and my first suspect was unclosed paragraph, but it turns out the html comment is the culprit.

Reproducible example:

package.json:

{
  "type": "module",
  "scripts": {
    "dev": "tsx watch server.tsx"
  },
  "dependencies": {
    "express": "^4.19.2",
    "interweave": "^13.1.1",
    "interweave-ssr": "^2.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "tsx": "^4.19.0"
  }
}

server.tsx:

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import {Interweave} from "interweave";
import { polyfill as interweavePolyfill } from "interweave-ssr";

interweavePolyfill();

function App() {
  const content = "<!--test--><b>html code kinda</b>";
  return (
    <div>
      test <Interweave content={content} />
    </div>
  );
}

const app = express();
app.use(express.static("public"));

app.get("/", (_req, res) => {
  const html = renderToString(<App />);
  res.send(`<!doctype html>
<html>
  <head><meta charset="utf-8" /><title>Interweave SSR demo</title></head>
  <body>
    <div id="app">${html}</div>
    <script type="module" src="/client.jsx"></script>
  </body>
</html>`);
});

app.listen(3000, () => console.log("http://localhost:3000"));

Error message:

TypeError: Cannot read properties of undefined (reading '1')
    at Object.set (/home/jm/projects/trans-info/example-fail/node_modules/interweave-ssr/src/index.ts:135:2)
    at Parser.createContainer (/home/jm/projects/trans-info/example-fail/node_modules/interweave/src/Parser.ts:303:18)
    at new Parser (/home/jm/projects/trans-info/example-fail/node_modules/interweave/src/Parser.ts:118:1)
    at Interweave (/home/jm/projects/trans-info/example-fail/node_modules/interweave/src/Interweave.tsx:78:2)
    at Object.react_stack_bottom_frame (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:9808:18)
    at renderWithHooks (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5062:19)
    at renderElement (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5497:23)
    at retryNode (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6417:31)
    at renderNodeDestructive (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6367:11)
    at renderNode (/home/jm/projects/trans-info/example-fail/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6905:18)

I'm aware that issue is quickly fixable by removing the html comment, and that's what I'm doing, but still wanted to notify you of the issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions