Functional html composition not working #3841

simonh1000 · 2025-01-20T12:54:27Z

simonh1000
Jan 20, 2025

I saw https://hono.dev/docs/helpers/html#act-as-functional-component and thought that was exactly what I needed as it says "Since html returns an HtmlEscapedString, it can act as a fully functional component without using JSX" (emphasis added)

So I copied the code into an index.ts built with vite and immediately got errors reported in VSCode. in the terminal I get:

[plugin:vite:esbuild] Transform failed with 1 error:
/Users/simon/code/remix/remix_app copy/src/index.ts:32:12: ERROR: Expected ">" but found "{"
/Users/simon/code/remix/remix_app copy/src/index.ts:32:12
Expected ">" but found "{"
30 |  
31 |  const Content = (props: { siteData: SiteData; name: string }) => (
32 |      <Layout {...props.siteData}>
   |              ^
33 |          <h1>Hello {props.name}</h1>
34 |      </Layout>

What am I doing wrong?

Full code

import { Context, Hono } from "hono";
import { html, raw } from "hono/html";

const app = new Hono();

interface SiteData {
    title: string;
    description: string;
    image: string;
    children?: any;
}

const Layout = (props: SiteData) => html`
  <html>
  <head>
    <meta charset="UTF-8">
    <title>${props.title}</title>
    <meta name="description" content="${props.description}">
    <head prefix="og: http://ogp.me/ns#">
    <meta property="og:type" content="article">
    <!-- More elements slow down JSX, but not template literals. -->
    <meta property="og:title" content="${props.title}">
    <meta property="og:image" content="${props.image}">
  </head>
  <body>
    ${props.children}
  </body>
  </html>
  `;

const Content = (props: { siteData: SiteData; name: string }) => (
    <Layout {...props.siteData}>
        <h1>Hello {props.name}</h1>
    </Layout>
);

app.get("/", (c:Context) => {
    const props = {
        name: "World",
        siteData: {
            title: "Hello <> World",
            description: "This is a description",
            image: "https://example.com/image.png",
        },
    };
    return c.html(<Content {...props} />);
});

export default app;

simonh1000 · 2025-01-20T13:07:59Z

simonh1000
Jan 20, 2025
Author

I played around some more and add jsx support to my tsconfig.json and now it seems to compose. I think the documents are misleading?

2 replies

EdamAme-x Jan 23, 2025

Can you tell me how to fix it?

simonh1000 Jan 24, 2025
Author

I had to addback in the tsconfig settings that were there from the initial install. I've never used react before and immediately removed them, but react is the way hono seems to create composable views

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

Functional html composition not working #3841

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Hono

Functional html composition not working #3841

simonh1000 Jan 20, 2025

Replies: 1 comment · 2 replies

simonh1000 Jan 20, 2025 Author

EdamAme-x Jan 23, 2025

simonh1000 Jan 24, 2025 Author

simonh1000
Jan 20, 2025

Replies: 1 comment 2 replies

simonh1000
Jan 20, 2025
Author

simonh1000 Jan 24, 2025
Author