Fresh: <Head> component is not supported
When running
deno task start
with this as my pages/index.tsx
file (as in the demo) I'm seeing the following error. Any ideas what might be going on?
An error occurred during route handling or page rendering. Error: <Head> component is not supported in the browser, or during suspense renders.
at Object.Head (https://deno.land/x/fresh@1.1.5/src/runtime/head.ts:15:11)
An error occurred during route handling or page rendering. Error: <Head> component is not supported in the browser, or during suspense renders.
at Object.Head (https://deno.land/x/fresh@1.1.5/src/runtime/head.ts:15:11)
import_map.json
{
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.1.5/",
"kysely": "https://esm.sh/kysely@0.24.2",
"kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
"preact": "https://esm.sh/preact@10.13.1",
"preact/hooks": "https://esm.sh/preact@10.13.1/hooks",
"preact/": "https://esm.sh/preact@10.13.1/",
"preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.6",
"@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
"fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
"redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
}
}
import_map.json
{
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.1.5/",
"kysely": "https://esm.sh/kysely@0.24.2",
"kysely-deno-postgres": "https://deno.land/x/kysely_deno_postgres@v0.4.0/mod.ts",
"preact": "https://esm.sh/preact@10.13.1",
"preact/hooks": "https://esm.sh/preact@10.13.1/hooks",
"preact/": "https://esm.sh/preact@10.13.1/",
"preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.6",
"@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
"fresh_session": "https://deno.land/x/fresh_session@0.2.0/mod.ts",
"redis": "https://deno.land/x/redis@v0.29.2/mod.ts"
}
}
// pages/index.tsx
import { Head } from "$fresh/runtime.ts";
import Counter from "../islands/Counter.tsx";
export default function Home() {
return (
<>
<Head>
<title>Fresh App</title>
</Head>
<div>
<img
src="/logo.svg"
width="128"
height="128"
alt="the fresh logo: a sliced lemon dripping with juice"
/>
<p>
Welcome to `fresh`. Try updating this message in the
./routes/index.tsx file, and refresh.
</p>
<Counter start={3} />
</div>
</>
);
}
// pages/index.tsx
import { Head } from "$fresh/runtime.ts";
import Counter from "../islands/Counter.tsx";
export default function Home() {
return (
<>
<Head>
<title>Fresh App</title>
</Head>
<div>
<img
src="/logo.svg"
width="128"
height="128"
alt="the fresh logo: a sliced lemon dripping with juice"
/>
<p>
Welcome to `fresh`. Try updating this message in the
./routes/index.tsx file, and refresh.
</p>
<Counter start={3} />
</div>
</>
);
}
3 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Does you
Counter
contain a Head
?
The code you shared should workUnknown User•2y ago
Message Not Public
Sign In & Join Server To View