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

Hussein•2w 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 🌈•7d 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?

Hussein•7d ago

will did not work

bigmistqke 🌈•7d ago

how does your code look now?

Hussein•7d 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 🌈•7d ago

this one I expected to work.

Hussein•7d 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 🌈•7d 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

Hussein•7d ago

are u doing ssr?

bigmistqke 🌈•7d ago

think so lemme check

Hussein•7d 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 🌈•7d ago

i think it defaults to ssr right

Hussein•7d ago

do our versions match?

bigmistqke 🌈•7d 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"
}

Hussein•7d 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 🌈•7d ago

wait ooo i see ur not using solid-start

Hussein•7d ago

yep otherwise my App would look different

bigmistqke 🌈•7d ago

kind of important to add that information how so?

Hussein•7d ago

App would use FileRoutes or something like that in solidstart

bigmistqke 🌈•7d ago

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

Hussein•7d ago

interesting

bigmistqke 🌈•7d 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.

Hussein•7d ago

isn't solidstart v1 already?

bigmistqke 🌈•7d ago

yes exactly early 1.0

Hussein•7d ago

bigmistqke 🌈•7d ago

the api will not have drastic changes

Hussein•7d ago

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

bigmistqke 🌈•7d ago

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

Hussein•7d ago

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

bigmistqke 🌈•7d 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.

Hussein•7d 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 🌈•7d 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

Hussein•7d 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 🌈•7d 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.

Hussein•7d ago

oh this is for bundling i think i use vite

bigmistqke 🌈•7d ago

I might give it a shot one day 😁

Hussein•7d 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 🌈•7d ago