TanStackT
TanStack•9mo ago•
6 replies
popular-magenta

How can I configure base html in Tanstack Start (SolidJS) Application ?

I tried to create this root route:
import { createRootRoute, HeadContent, Outlet } from "@tanstack/solid-router";
import { Scripts } from "@tanstack/solid-start";

export const Route = createRootRoute({
  component: RootComponent,
  head: () => ({
    links: [
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        crossOrigin: "anonymous",
      },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap",
      },
    ],
    scripts: [
      {
        src: "https://analytics.eu.umami.is/script.js",
        defer: true,
        "data-website-id": "ee09d538-8dab-4134-9dca-aad904b65af7",
      },
    ],
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { title: "Solid UI" },
    ],
  }),
});

function RootComponent() {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

When I launch the dev server, I get template2 is not a function on the browser.
How can I simply configure a basic html structure for a Tanstack Start (Solid) Application ?
Thx
Was this page helpful?