H
Hono•4mo ago
Peтe

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
No description
6 Replies
Shy
Shy•4mo ago
I don't think it failed, I think you're trying to render a list of objects
Peтe
PeтeOP•4mo ago
List of objects where? It is a single object <Content/>
Aditya Mathur
Aditya Mathur•4mo 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
PeтeOP•4mo 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
PeтeOP•4mo 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"
No description
Peтe
PeтeOP•4mo 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

Did you find this page helpful?