SolidJS•17mo ago

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

exerciseOP•17mo 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•17mo 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?

exerciseOP•17mo ago

will did not work

bigmistqke•17mo ago

how does your code look now?

exerciseOP•17mo 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•17mo ago

this one I expected to work.

exerciseOP•17mo 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•17mo 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

exerciseOP•17mo ago

are u doing ssr?

bigmistqke•17mo ago

think so lemme check

exerciseOP•17mo 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•17mo ago

i think it defaults to ssr right

exerciseOP•17mo ago

do our versions match?

bigmistqke•17mo 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"
}

exerciseOP•17mo 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•17mo ago

wait ooo i see ur not using solid-start

exerciseOP•17mo ago

yep otherwise my App would look different

bigmistqke•17mo ago

kind of important to add that information how so?

exerciseOP•17mo ago

App would use FileRoutes or something like that in solidstart

bigmistqke•17mo ago

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

exerciseOP•17mo ago

interesting

bigmistqke•17mo 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.

exerciseOP•17mo ago

isn't solidstart v1 already?

bigmistqke•17mo ago

yes exactly early 1.0

exerciseOP•17mo ago

bigmistqke•17mo ago

the api will not have drastic changes

exerciseOP•17mo ago

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

bigmistqke•17mo ago

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

exerciseOP•17mo ago

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

bigmistqke•17mo 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.

exerciseOP•17mo 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•17mo 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

exerciseOP•17mo 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•17mo 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.

exerciseOP•17mo ago

oh this is for bundling i think i use vite

bigmistqke•17mo ago

I might give it a shot one day 😁

exerciseOP•17mo 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•17mo ago

Ye no transforms right, only to h-calls

exerciseOP•17mo ago

but if you use bun with vite, solid is just gonna be processed with esbuild and rollup, so bun doesn't care anymore :D

bigmistqke•17mo ago

Lol all this stuff is very much out of my comfort zone. Gets so confusing haha Abstractions on top of abstractions. Turtles all the way down!

exerciseOP•17mo ago

i fixed it

bigmistqke•17mo ago

Nice! What was it in the end?

exerciseOP•17mo ago

. provideRequestEvent

Gaming

Programming

Error: Cannot find cache context

Did you find this page helpful?