4 replies

[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

bun init

elysia

elysia

and

@elysiajs/html

@elysiajs/html

typed-html

typed-html

and adjusted the

tsconfig.json

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

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?

[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

bun init

elysia

elysia

and

@elysiajs/html

@elysiajs/html

typed-html

typed-html

and adjusted the

tsconfig.json

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

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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads