Hono•2mo 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•2mo ago

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

PeтeOP•2mo ago

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

Aditya Mathur•2mo 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тeOP•2mo 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тeOP•2mo 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тeOP•2mo 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"