T
TanStack•5mo ago
fair-rose

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>
  );
}
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
4 Replies
stormy-gold
stormy-gold•5mo ago
cc @Birk Skyum
fair-rose
fair-roseOP•5mo ago
Just for information, is it normal to have header content on the head of the document and also before the Outlet in the body ? And is the way I'm doing things is the right way or not ? (is an error on my part or is it a bug in Tanstack Start) ?
extended-salmon
extended-salmon•5mo ago
This is something we haven't figured out in tanstack start for solid yet
fair-rose
fair-roseOP•5mo ago
ok I guess you're answer is for the fact we have double heading content in the html ? Or does it concern the template2 is not a function ? Well I'll stick to SolidStart while waiting to enjoy Tanstack on SolidJS 😄

Did you find this page helpful?