Misery Comments - Answer Overflow

Misery

•Created by Misery on 11/28/2024 in #support

Where to put <MetaProvider>

i found out you can just add it on app.tsx:

import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import "./app.css";
import Nav from "./components/Nav";

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <MetaProvider>
            <Title>My Website</Title>
            <Nav />
            <Suspense>{props.children}</Suspense>
          </MetaProvider>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import "./app.css";
import Nav from "./components/Nav";

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <MetaProvider>
            <Title>My Website</Title>
            <Nav />
            <Suspense>{props.children}</Suspense>
          </MetaProvider>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

2 replies

SSolidJS

•Created by Misery on 9/22/2024 in #support

`onMount` not called / Component not rendered?

reverting everything to the control makes the component render again

6 replies

SSolidJS

•Created by Misery on 9/22/2024 in #support

`onMount` not called / Component not rendered?

Here's what I found today: This works:

import { Title } from "@solidjs/meta";

export default function About() {
  return (
    <main>
      <Title>This should be visible if the component is rendered</Title>
      <p>Test {getVersionDummy()}</p>
    </main>
  );
}

function getVersionDummy(): string {
  return "this is a dummy version";
}

import { Title } from "@solidjs/meta";

export default function About() {
  return (
    <main>
      <Title>This should be visible if the component is rendered</Title>
      <p>Test {getVersionDummy()}</p>
    </main>
  );
}

function getVersionDummy(): string {
  return "this is a dummy version";
}

Rendered from browser:

Test this is a dummy version

Test this is a dummy version

This also works:

import { Title } from "@solidjs/meta";
import { getBackendVersion } from "~/rust/ffi"; // this function still returns dummy text

export default function Test() {
  return (
    <main>
      <Title>This should be visible if the component is rendered</Title>
      <p>Test {getVersionDummy()}</p>
    </main>
  );
}

function getVersionDummy(): string {
  return getBackendVersion();
}

import { Title } from "@solidjs/meta";
import { getBackendVersion } from "~/rust/ffi"; // this function still returns dummy text

export default function Test() {
  return (
    <main>
      <Title>This should be visible if the component is rendered</Title>
      <p>Test {getVersionDummy()}</p>
    </main>
  );
}

function getVersionDummy(): string {
  return getBackendVersion();
}

From the terminal:

5:46:22 PM [vite] hmr update /mnt/c/Users/InhumaneTarball/Documents/Code/Rust/mcs-mngr/dms-web/src/routes/about.tsx?pick=default&pick=$css
5:46:23 PM [vite] hmr invalidate /mnt/c/Users/InhumaneTarball/Documents/Code/Rust/mcs-mngr/dms-web/src/routes/about.tsx?pick=default&pick=$css
5:46:23 PM [vite] page reload src/routes/about.tsx
Running dummy version

5:46:22 PM [vite] hmr update /mnt/c/Users/InhumaneTarball/Documents/Code/Rust/mcs-mngr/dms-web/src/routes/about.tsx?pick=default&pick=$css
5:46:23 PM [vite] hmr invalidate /mnt/c/Users/InhumaneTarball/Documents/Code/Rust/mcs-mngr/dms-web/src/routes/about.tsx?pick=default&pick=$css
5:46:23 PM [vite] page reload src/routes/about.tsx
Running dummy version

However switching the getBackendVersion function to fetch the actual version instead of a hardcoded string doesnt:

export function getBackendVersion(): string {
  const version = dms_version().toString(); // dms_version is a foreign c function here
  // const version = "dummy version";

  console.log(`Running ${version}`);

  return version;
}

export function getBackendVersion(): string {
  const version = dms_version().toString(); // dms_version is a foreign c function here
  // const version = "dummy version";

  console.log(`Running ${version}`);

  return version;
}

i did notice that the loading time did take a little bit longer. not by a lot but enough for me to notice at a glance edit: could just be me tbh. restarting the dev server does nothing against remedying this problem (ctrl + c and then bun dev right after) After this (also tried restarting dev server) the part where getBackendVersion returns a harcoded string also doesnt render

6 replies

SSolidJS

•Created by Misery on 9/22/2024 in #support

`onMount` not called / Component not rendered?

absolutely nothing in both the browser console and the terminal

6 replies

SSolidJS

•Created by Misery on 9/22/2024 in #support

`onMount` not called / Component not rendered?

well originally (calling foreign c function https://discord.com/channels/722131463138705510/1287021199003750500/1287021199003750500), it only appears when i reload the page and not when i click into the about page. now it does not show up

6 replies

SSolidJS

•Created by Misery on 9/22/2024 in #support

`onMount` not called / Component not rendered?

not quite sure how to respond but I just have it as the /about route in my app

6 replies

SSolidJS

•Created by Misery on 9/14/2024 in #support

Cannot find module

nevermind it magically disappeared when i restarted vs code

2 replies

SSolidJS

•Created by Misery on 8/27/2024 in #support

Seemingly random hydration mismatches

how can this be? props.online is a bool:

  // ...
  online: boolean,
  // ...

  // ...
  online: boolean,
  // ...

and im using online properly:

        <ServerListItem
          id="server-2"
          online={true}
          display_name="Server 02 Name"
          description=""
          players={{ total: 20, active: 15 }}
          modpack="test2"
          software="Forge 1.2.3 for Minecraft 1.20.1" />

        <ServerListItem
          id="server-2"
          online={true}
          display_name="Server 02 Name"
          description=""
          players={{ total: 20, active: 15 }}
          modpack="test2"
          software="Forge 1.2.3 for Minecraft 1.20.1" />