rabbit_rabbit•2y 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•2y ago

Message Not Public

lcasdev•2y ago

Does you Counter contain a Head? The code you shared should work

Unknown User•2y ago

Message Not Public