rabbit_rabbit
rabbit_rabbit15mo ago

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
Unknown User15mo ago
Message Not Public
Sign In & Join Server To View
lcasdev
lcasdev15mo ago
Does you Counter contain a Head? The code you shared should work
Unknown User
Unknown User15mo ago
Message Not Public
Sign In & Join Server To View