TSX layout / templating question

- is there a way to link a static style sheet from the server side tsx components?? i've been trying, searching and proompting, what am i missing... - im using server side tsx to render html and i want to link a style sheet instead of using the jsx css helper, can i just link a stylesheet like normally? main.tsx
import { Hono } from 'hono'
import { html, raw } from 'hono/html'
import { jsx} from 'hono/jsx'
import { Layout } from './layout.tsx'
import { serveStatic } from 'hono/deno'

const app = new Hono()

app.use('/static/*', serveStatic({ root: './' }))

app.get('/', (c) => {
return c.html(
<Layout title='tannerr.dev'>
<h1>Welcome to tannerr.dev</h1>
<form action="/entry" method="POST">
<fieldset>
<legend>This is a web form</legend>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required autofocus/>
<button>Submit</button>
</fieldset>
</form>
</Layout>
)
})

Deno.serve(app.fetch)
import { Hono } from 'hono'
import { html, raw } from 'hono/html'
import { jsx} from 'hono/jsx'
import { Layout } from './layout.tsx'
import { serveStatic } from 'hono/deno'

const app = new Hono()

app.use('/static/*', serveStatic({ root: './' }))

app.get('/', (c) => {
return c.html(
<Layout title='tannerr.dev'>
<h1>Welcome to tannerr.dev</h1>
<form action="/entry" method="POST">
<fieldset>
<legend>This is a web form</legend>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required autofocus/>
<button>Submit</button>
</fieldset>
</form>
</Layout>
)
})

Deno.serve(app.fetch)
layout.tsx
export const Layout = (props: { children: any, title?: string }) => (
<html>
<head>
<title>{props.title || 'My App'}</title>
<link href="./public/styles.css" rel="stylesheet">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/users">Users</a>
</nav>
{props.children}
</body>
</html>
)
export const Layout = (props: { children: any, title?: string }) => (
<html>
<head>
<title>{props.title || 'My App'}</title>
<link href="./public/styles.css" rel="stylesheet">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/users">Users</a>
</nav>
{props.children}
</body>
</html>
)
error output
Task start deno run --allow-net main.tsx
error: The module's source code could not be parsed: Unexpected token `html`. Expected jsx identifier at file:///home/kndr/web-dev/dono/dono/layout.tsx:8:4

<html class={html}>
~~~~
Task start deno run --allow-net main.tsx
error: The module's source code could not be parsed: Unexpected token `html`. Expected jsx identifier at file:///home/kndr/web-dev/dono/dono/layout.tsx:8:4

<html class={html}>
~~~~
7 Replies
ambergristle
ambergristle2d ago
hey! still no idea why deno is struggling w the jsx, but i wanted to call out jsxRenderer and c.render. i've found them super useful also, discord supports code syntax highlighting same as markdown have you tried ssg + then serving? i know it's not what you're going for, but it might be a way to troubleshoot deno+html
tannerr_dev
tannerr_devOP2d ago
i will try the render options, i haven't yet, thanks i just want someone to be like " no you can't..." lol, something straight forward, but ill keep experimenting
ambergristle
ambergristle2d ago
dude, i feel it there's nothing worse than being so deep in a rabbit hole that you're no longer sure you're not just digging to nowhere i keep coming back to this <html class={html}> that's not your code, is it? and just to confirm, you get this error trying to run a local server, yeah? bear in mind that i know less than nothing about deno, but i've been looking through their jsx docs, and to me it seems like by default, deno tries to compile jsx into js i wonder whether that's what hono/jsx/dom does @tannerr_dev have you tried closing the link tag?
tannerr_dev
tannerr_devOP2d ago
THAT WORKED!! OMG
ambergristle
ambergristle2d ago
lets goooooo i remembered i had the same issue when i was switching between compilation approaches on a hono/bun project it just didn't make sense that deno would be having issues w jsx so the callout here is that some jsx compilation options require self-closing, while others forbid it it's a treat
tannerr_dev
tannerr_devOP2d ago
i know this now. what a trip. thanks again!! you saved me
ambergristle
ambergristlethis hour
happy to help!

Did you find this page helpful?