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•6mo 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•6mo 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•6mo ago

will did not work

bigmistqke•6mo ago

how does your code look now?

HusseinOP•6mo 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•6mo ago

this one I expected to work.

HusseinOP•6mo 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•6mo 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•6mo ago

are u doing ssr?

bigmistqke•6mo ago

think so lemme check

HusseinOP•6mo 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•6mo ago

i think it defaults to ssr right

HusseinOP•6mo ago

do our versions match?

bigmistqke•6mo 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•6mo 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•6mo ago

wait ooo i see ur not using solid-start

HusseinOP•6mo ago

yep otherwise my App would look different

bigmistqke•6mo ago

kind of important to add that information how so?

HusseinOP•6mo ago

App would use FileRoutes or something like that in solidstart

bigmistqke•6mo ago

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

HusseinOP•6mo ago

interesting

bigmistqke•6mo 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•6mo ago

isn't solidstart v1 already?

bigmistqke•6mo ago

yes exactly early 1.0

HusseinOP•6mo ago

bigmistqke•6mo ago

the api will not have drastic changes

HusseinOP•6mo ago

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

bigmistqke•6mo ago

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

HusseinOP•6mo ago

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

bigmistqke•6mo 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•6mo 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•6mo 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•6mo 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•6mo 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•6mo ago

oh this is for bundling i think i use vite

bigmistqke•6mo ago

I might give it a shot one day 😁

HusseinOP•6mo 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•6mo ago