H
Hono•3w ago
Doinksworth

Unable to render jsx with bun

Trying to utilize hono html and css for html rendering, but seem to get error: Cannot find module 'react/jsx-dev-runtime'. Sample code: 
import {Hono} from 'hono'
import { css, Style } from 'hono/css';

const app = new Hono()
app.get('/', (c) => {
    const headerClass = css`
            background-color: orange;
            color: white;
            padding: 1rem;
        `;

    return c.html(
        `
            <html>
            <head>
                ${<Style/>}
                {/* Important: This component injects the generated CSS */}
            </head>
            <body>
            <h1 class={headerClass}>Hello Hono with CSS Helper!</h1>
            </body>
            </html>
        `
    )
    
});

export default {
    port: 8787,
    fetch: app.fetch,
}
import {Hono} from 'hono'
import { css, Style } from 'hono/css';

const app = new Hono()
app.get('/', (c) => {
    const headerClass = css`
            background-color: orange;
            color: white;
            padding: 1rem;
        `;

    return c.html(
        `
            <html>
            <head>
                ${<Style/>}
                {/* Important: This component injects the generated CSS */}
            </head>
            <body>
            <h1 class={headerClass}>Hello Hono with CSS Helper!</h1>
            </body>
            </html>
        `
    )
    
});

export default {
    port: 8787,
    fetch: app.fetch,
}
1 Reply
Doinksworth
DoinksworthOP•3w ago
I was missing "jsxImportSource": "hono/jsx", in my tsconfig

Did you find this page helpful?