`onMount` not called / Component not rendered?

I seriously do not know why this doesnt work:

export default function About() {
  const [version, setVersion] = createSignal("Loading...");

  onMount(() => {
    console.log("onMount triggered");

    const version = getVersion();
    setVersion(version);
  });

  return (
    <main>
      <Title>About MCS</Title>
      <p>Running {version()}</p>
    </main>
  );
}

function getVersion() {
  return "dummy";
}

export default function About() {
  const [version, setVersion] = createSignal("Loading...");

  onMount(() => {
    console.log("onMount triggered");

    const version = getVersion();
    setVersion(version);
  });

  return (
    <main>
      <Title>About MCS</Title>
      <p>Running {version()}</p>
    </main>
  );
}

function getVersion() {
  return "dummy";
}

as seen in the onMount line, im expecting a onMount Triggered message on my browser devtools but i seemingly get nothing. which leads me to the conclusion that my component isnt being rendered. this is backed up by the fact that the title hasnt changed any reasons as to how this happens? Im at my wit's end trying to understand why to no avail

1 Reply

MiseryOP•2mo ago

not quite sure how to respond but I just have it as the /about route in my app 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 absolutely nothing in both the browser console and the terminal 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 reverting everything to the control makes the component render again

Gaming

Programming

`onMount` not called / Component not rendered?