template2 is not a function

Hi there, have anyone experienced this issue before?

3 Replies

CyteonOP•2mo ago

its a fresh project made with solidstart code of app.tsx

import { createSignal } from "solid-js";
import "./app.css";

export default function App() {
  const [count, setCount] = createSignal(0);

  return (
    <body>
      <h1>Hello world!</h1>
      <button
        class="increment"
        onClick={() => setCount(count() + 1)}
        type="button"
      >
        Clicks: {count()}
      </button>
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </body>
  );
}

import { createSignal } from "solid-js";
import "./app.css";

export default function App() {
  const [count, setCount] = createSignal(0);

  return (
    <body>
      <h1>Hello world!</h1>
      <button
        class="increment"
        onClick={() => setCount(count() + 1)}
        type="button"
      >
        Clicks: {count()}
      </button>
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </body>
  );
}

(i only changed main -> body)

Eve•2mo ago

the template already has a body, so you're attempting to create a document with 2 body elements. if you check entry-server.tsx, you will see this

   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>

   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>

This is what your document html structure that gets served will be. Your App component, gets mounted inside of the div#app. So by returning a body element in your App component, you're attempting to embed a second <body> inside of the div, which is not a valid HTML document.

CyteonOP•2mo ago

Ah Didn't notice Thanks

Gaming

Programming

template2 is not a function