Hono•2w ago

JSX not working at all with just "bun add hono"

const Layout = (props) => 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) => (
  <Layout {...props.siteData}>
    <h1>Hello {props.name}</h1>
  </Layout>
)

const Homepage = async (c) => {
  const props = {
    name: 'World',
    siteData: {
      title: 'Hello <> World',
      description: 'This is a description',
      image: 'https://example.com/image.png',
    },
  }
  return c.html(<Content {...props} />)

}

const Layout = (props) => 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) => (
  <Layout {...props.siteData}>
    <h1>Hello {props.name}</h1>
  </Layout>
)

const Homepage = async (c) => {
  const props = {
    name: 'World',
    siteData: {
      title: 'Hello <> World',
      description: 'This is a description',
      image: 'https://example.com/image.png',
    },
  }
  return c.html(<Content {...props} />)

}

this is what i am trying to make work, the basic example route without any TS, but all I get is this blank page on the browser

6 Replies

Shy•2w ago

I don't think it failed, I think you're trying to render a list of objects

Peтe•2w ago

List of objects where? It is a single object <Content/>

Aditya Mathur•2w ago

Hey @Shy based upon this https://discord.com/channels/1011308539819597844/1012485912409690122/1293495908193013845, it seems this code is working. My guess is either their is some middleware which is effecting this or the bun runtime. @Peтe are you using any middleware here?

Peтe•2w ago

just hono's cors() Well, I think I found what the problem is @Aditya Mathur I added the tsconfig.json Even if I do not use any TS on my project And the error changed 🧐 Yep, that's it

Peтe•2w ago

@Aditya Mathur a feedback I would like to give, in order to help other stupid devs like me that takes things way too literally is to slightly modify this phrase "To use JSX, modify (...)" "If you are not using Typescript, you must add this file in order to JSX to work out of the box"

Peтe•2w ago

When I put the pragma directives on top of the files using JSX, this [object Object] still persists It does not work it seems

Gaming

Programming

JSX not working at all with just "bun add hono"