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.
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:
server.tsx:
Error message:
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.