Property 'html' does not exist on type 'Context'

Question

A simple app following the documentation instructions, but still get error:

index.tsx

import Elysia from "elysia";
import { html } from "@elysiajs/html";
import * as tHTML from "typed-html";
import staticPlugin from "@elysiajs/static";
import Home from "./components/Home";
import { About } from "./components/About";

new Elysia()
    .use(html())
    .use(staticPlugin())
    .get("/", ({ html }) =>
        html(
            <BaseHTML>
                <Home />
            </BaseHTML>
        )
    )
    .get("/about", ({ headers, html }) => {
        if (headers?.[`hx-request`]) {
            return <About />;
        }
        return html(
            <BaseHTML>
                <About />
            </BaseHTML>
        );
    })
    .listen(3000, ({ hostname, port }) =>
        console.log(` running on http://${hostname}:${port}`)
    );

const BaseHTML = ({ children }: tHTML.Children) => {
    return (
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0"
                />
                <title>FireBEH</title>
                <link rel="stylesheet" href="public/style.css" />
                <script src="public/htmx.min.js"></script>
            </head>
            <body class="px-4 grid grid-rows-[min-content,1fr]">
                <nav class="flex justify-between">
                    <h1 class="py-4">FireBEH</h1>
                    <div class="flex items-center">
                        <button
                            hx-get="/about"
                            hx-target="#pageContent"
                            hx-push-url="/about"
                        >
                            About
                        </button>
                    </div>
                </nav>
                <div class="flex justify-center items-center" id="pageContent">
                    {children}
                </div>
            </body>
        </html>
    );
};

Error:

[{
    "owner": "typescript",
    "code": "2339",
    "severity": 8,
    "message": "Property 'html' does not exist on type 'Context<{ body: unknown; params: Record<never, string>; query: undefined; headers: undefined; response: unknown; }, {}> & {}'.",
    "source": "ts",
    "startLineNumber": 11,
    "startColumn": 18,
    "endLineNumber": 11,
    "endColumn": 22
}]

Property 'html' does not exist on type 'Context'

0 Answers0