Error: Cannot find cache context

SSR:

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const get = cache(async () => {
            const res = await fetch(
              "https://jsonplaceholder.typicode.com/todos/1"
            );
            return res.json();
          }, "data");

          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

43 Replies

HusseinOP•5mo ago

this only happens when going to /other from a new tab. when going to /other from the link in / it works fine. it means the browser router is working, but the server router isn't

bigmistqke•5mo ago

move

const get = cache(async () => {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
  return res.json();
}, "data");

const get = cache(async () => {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
  return res.json();
}, "data");

out of the component?

HusseinOP•5mo ago

will did not work

bigmistqke•5mo ago

how does your code look now?

HusseinOP•5mo ago

moved it to App and outside of App too both didn't work

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

const get = cache(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return res.json();
}, "data");

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

const get = cache(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return res.json();
}, "data");

export function App({ url }: { url?: string }) {
  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

and

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  const get = cache(async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return res.json();
  }, "data");

  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

import { cache, createAsync, Route, Router } from "@solidjs/router";
import { Suspense } from "solid-js";

export function App({ url }: { url?: string }) {
  const get = cache(async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return res.json();
  }, "data");

  return (
    <Router url={url}>
      <Route
        path="/"
        component={() => (
          <>
            Hello World
            <a style={{ display: "block", "margin-top": "1em" }} href="/other">
              Other
            </a>
          </>
        )}
      />
      <Route
        path="/other"
        component={() => {
          const data = createAsync(() => get());

          return (
            <>
              Other
              <Suspense fallback={<p>Loading...</p>}>
                <pre>{JSON.stringify(data())}</pre>
              </Suspense>
              <a style={{ display: "block", "margin-top": "1em" }} href="/">
                Home
              </a>
            </>
          );
        }}
      />
    </Router>
  );
}

same error

bigmistqke•5mo ago

this one I expected to work.

HusseinOP•5mo ago

the error is purely ssr btw it never happens on the client and only on the /other page i tried wrapping App with Suspense didn't work either

bigmistqke•5mo ago

I just ran your code from a fresh pnpm create solid@latest and with this sample and I do not get an error. I had to change export App to export default App

HusseinOP•5mo ago

are u doing ssr?

bigmistqke•5mo ago

think so lemme check

HusseinOP•5mo ago

{
  "@solidjs/meta": "^0.29.4",
  "@solidjs/router": "^0.13.6",
  "solid-js": "^1.8.17",
  "vite-plugin-solid": "^2.10.2",
  "vite": "^5.3.1"
}

{
  "@solidjs/meta": "^0.29.4",
  "@solidjs/router": "^0.13.6",
  "solid-js": "^1.8.17",
  "vite-plugin-solid": "^2.10.2",
  "vite": "^5.3.1"
}

bigmistqke•5mo ago

i think it defaults to ssr right

HusseinOP•5mo ago

do our versions match?

bigmistqke•5mo ago

"dependencies": {
  "@solidjs/meta": "^0.29.4",
  "@solidjs/router": "^0.13.6",
  "@solidjs/start": "^1.0.2",
  "solid-js": "^1.8.17",
  "vinxi": "^0.3.12"
}

"dependencies": {
  "@solidjs/meta": "^0.29.4",
  "@solidjs/router": "^0.13.6",
  "@solidjs/start": "^1.0.2",
  "solid-js": "^1.8.17",
  "vinxi": "^0.3.12"
}

HusseinOP•5mo ago

but does pnpm create solid offer vanilla solid ssr? i think it only offers csr solid or solidstart i'm using vanilla solid ssr

bigmistqke•5mo ago

wait ooo i see ur not using solid-start

HusseinOP•5mo ago

yep otherwise my App would look different

bigmistqke•5mo ago

kind of important to add that information how so?

HusseinOP•5mo ago

App would use FileRoutes or something like that in solidstart

bigmistqke•5mo ago

no FileRoutes is optional as i said, i literally copied your code and it works you can have config based routing

HusseinOP•5mo ago

interesting

bigmistqke•5mo ago

or even mix and match i would recommend using solid-start if you want ssr it has its own set of bugs since it is still early 1.0, but it is where all the focus/support on ssr is these days.

HusseinOP•5mo ago

isn't solidstart v1 already?

bigmistqke•5mo ago

yes exactly early 1.0

HusseinOP•5mo ago

bigmistqke•5mo ago

the api will not have drastic changes

HusseinOP•5mo ago

understandable. its still a bug worth reporting tho. i will create a repo

bigmistqke•5mo ago

true, or at least if vanilla ssr does not support the @solidjs/router it should be communicated clearly.

HusseinOP•5mo ago

it does https://github.com/huseeiin/solidjs-bug-repro you need to have bun installed, sadly

bigmistqke•5mo ago

Ok, so ur using bun too. It would be good to mention this information from the start If SSR deviates from solid-start, if ur using bun/deno or another runtime that is not node.

HusseinOP•5mo ago

hm i don't think so but idk just tried in node, it doesn't work either all i changed is Bun.file to readFileSync to work with node :D https://github.com/solidjs/solid-router/blob/main/src/data/cache.ts#L34 this is where the error happens its because i'm not using provideRequestEvent i think yeah probably that

bigmistqke•5mo ago

I can reproduce the error on my end, but tbh it's a bit too far from what I have knowledge in to help u with But ye, the error has probably something to do with that custom SSR setup I know bun when using solid-start actually uses node under the hood because it is missing some APIs

HusseinOP•5mo ago

custom ssr is hard but not impossible bun has some problem with FormData in solidstart but everything else works fine with --bun (if you run bun --bun dev bun uses bun runtime, not node)

bigmistqke•5mo ago

https://github.com/DaniGuardiola/bun-plugin-solid this might be relevant to u

GitHub

GitHub - DaniGuardiola/bun-plugin-solid: A plugin to compile Solid....

A plugin to compile Solid.js with Bun. Contribute to DaniGuardiola/bun-plugin-solid development by creating an account on GitHub.

HusseinOP•5mo ago

oh this is for bundling i think i use vite

bigmistqke•5mo ago

I might give it a shot one day 😁

HusseinOP•5mo ago

i don't care about bun bundler bun doesn't support solidjs style of jsx that's the only blocker only react/preact works

bigmistqke•5mo ago