Ethan's dev spot•11mo ago

[JSX] Type Promise<string> is not assignable to type AttributeValue | undefined

Hey there 👋 I was trying to follow along the awesome intro to the BETH stack https://www.youtube.com/watch?v=cpzowDDJj24 So far I've setup - empty bun project via bun init - elysia and @elysiajs/html - typed-html and adjusted the tsconfig.json Here is the seemingly simple code

import {html} from '@elysiajs/html'
import {Elysia} from 'elysia'
import * as elements from "typed-html";

const app = new Elysia()
    .use(html())
    .get("/", ({html}) =>
        html(
            <BaseHtml>
                <body>
                    <h1>Hello World</h1>
                </body>
            </BaseHtml>
        )
    )
    .listen(8080)

console.log(`🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`)

const BaseHtml = ({children}: elements.Children) =>
    `
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Todo App</title>
</head>

${children}
`;

import {html} from '@elysiajs/html'
import {Elysia} from 'elysia'
import * as elements from "typed-html";

const app = new Elysia()
    .use(html())
    .get("/", ({html}) =>
        html(
            <BaseHtml>
                <body>
                    <h1>Hello World</h1>
                </body>
            </BaseHtml>
        )
    )
    .listen(8080)

console.log(`🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`)

const BaseHtml = ({children}: elements.Children) =>
    `
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Todo App</title>
</head>

${children}
`;

Here is my issue The code runs and renders the HTML fine BUT I am getting the following issue in my IDEs (tested with WebStorm & Cursor)

TS2322: Type  Element  is not assignable to type  AttributeValue | undefined 
Type  Promise<string>  is not assignable to type  AttributeValue | undefined 
elements.d.ts(6, 5): The expected type comes from property  children  which is declared here on type  IntrinsicAttributes & Children

Any ideas on how to solve the type mismatch?

4 Replies

whatplan•11mo ago

you should use the beth package example that video is a bit out of date, check out the newest one

GitHub

GitHub - ethanniser/beth-big

Contribute to ethanniser/beth-big development by creating an account on GitHub.

Prison Mike•5mo ago

hi @Ethan can you just tell in previous version why was that type error occuring?

whatplan•5mo ago

It’s been so long I really couldn’t tell you sorry

Prison Mike•5mo ago

understandable. thanks.

Gaming

Programming

[JSX] Type Promise<string> is not assignable to type AttributeValue | undefined