Issue
I'm trying to do SSR with Bun and I want to have a Layout component that I use as a base for my pages.
Here is my Index page component:
import { useState } from "react";
import Layout from "../components/Layout";
export const render = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<Layout>
<h1>index</h1>
<p>the count is {count}</p>
<button onClick={increment}>increment</button>
</Layout>
);
};
Here is my Layout component:
import type { ReactNode } from "react"
export default (props: { children : ReactNode }) => {
return (
<>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
{props.children}
</body>
</html>
</>
)
}
When I run the server and try and visit the page, I get the following error:
BuildError: Expected identifier but found "!" In app/components/Layout.tsx:6:14
<!doctype html>
BuildError: Expected ">" but found "" In app/components/Layout.tsx:6:15
<!doctype html>
BuildError: Syntax Error!! In app/components/Layout.tsx:19:12
</>
VSCode also gives me this linting error:
JSX fragment has no corresponding closing tag.
How can I have doctype and html tags in my Layout component?
Solution
I figured out that renderToReadableStream will auto-add the doctype to the component, so I can just use my original example without the doctype tag and it works great.
Answered By - jdion84
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.