Joshua Posts - Answer Overflow

Joshua

•Created by Joshua on 2/21/2025 in #support

solid-router causes error: "cleanups created outside a `createRoot` or `render` will never be run"

Hi I am relatively new to solid so I could be making a simple mistake. I recently added solid router to my solid.js project and I am using the config based approach. Since I added the router and using it I get multiple errors like this: - cleanups created outside a createRoot or render will never be run - computations created outside a createRoot or render will never be disposed Since the router is actually rendered inside the render() method of solid, I am not sure what I am doing wrong, any help how to fix the warnings would be appreciated. Below you can see my code (I also uploaded the full files because pasting entire code is higher than the discord message limit. index.tsx

const wrapper = document.getElementById("root");

if (!wrapper) {
  throw new Error("Wrapper div not found");
}

const routes = [
  {
    path: "/",
    component: lazy(() => import("./App.tsx")),
  },
  {
    path: "/players",
    component: lazy(() => import("./components/players/Players.tsx")),
  },
];
render(() => <Router root={MainLayout}>{routes}</Router>, wrapper);

const wrapper = document.getElementById("root");

if (!wrapper) {
  throw new Error("Wrapper div not found");
}

const routes = [
  {
    path: "/",
    component: lazy(() => import("./App.tsx")),
  },
  {
    path: "/players",
    component: lazy(() => import("./components/players/Players.tsx")),
  },
];
render(() => <Router root={MainLayout}>{routes}</Router>, wrapper);

App.tsx

export default function App() {
  const [session, setSession] = createSignal<Session | null>(null);

  // On component mount, get the current session and subscribe to auth state changes.
  onMount(async () => {
    const {
      data: { session: currentSession },
    } = await supabase.auth.getSession();
    setSession(currentSession);

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    // Cleanup the subscription when the component unmounts.
    // THIS ACTUALLY THROWS THE ERROR: cleanups created outside a `createRoot` or `render` will never be run
    onCleanup(() => {
      subscription.unsubscribe();
    });
  });

  return (
    <>
      .....
    </>
  );
}

export default function App() {
  const [session, setSession] = createSignal<Session | null>(null);

  // On component mount, get the current session and subscribe to auth state changes.
  onMount(async () => {
    const {
      data: { session: currentSession },
    } = await supabase.auth.getSession();
    setSession(currentSession);

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    // Cleanup the subscription when the component unmounts.
    // THIS ACTUALLY THROWS THE ERROR: cleanups created outside a `createRoot` or `render` will never be run
    onCleanup(() => {
      subscription.unsubscribe();
    });
  });

  return (
    <>
      .....
    </>
  );
}

5 replies

Gaming

Programming