#Error: Cannot find cache context

91 messages · Page 1 of 1 (latest)

covert gull
#

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>
  );
}
#

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

mild bloom
#

move

const get = cache(async () => {
  const res = await fetch(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
  return res.json();
}, "data");
``` out of the component?
covert gull
#

will

#

did not work

mild bloom
#

how does your code look now?

covert gull
#

moved it to App and outside of App too

#

both didn't work

covert gull
# mild bloom how does your code look now? 
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>
  );
}
#

same error

mild bloom
covert gull
#

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

mild bloom
#

I had to change export App to export default App

covert gull
mild bloom
#

think so lemme check

covert gull
# 
{
  "@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"
}
mild bloom
#

i think it defaults to ssr right

covert gull
#

do our versions match?

mild bloom
# 
"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"
}
covert gull
#

i'm using vanilla solid ssr

mild bloom
#

wait

#

ooo

#

i see

#

ur not using solid-start

covert gull
#

yep

#

otherwise my App would look different

mild bloom
#

kind of important to add that information

mild bloom
covert gull
#

App would use FileRoutes or something like that in solidstart

mild bloom
#

no FileRoutes is optional

#

as i said, i literally copied your code and it works

#

you can have config based routing

covert gull
#

interesting

mild bloom
#

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.

covert gull
mild bloom
#

yes exactly

#

early 1.0

covert gull
#

ah

mild bloom
#

the api will not have drastic changes

covert gull
#

i will create a repo

mild bloom
covert gull
#

you need to have bun installed, sadly

mild bloom
#

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.

covert gull
#

but idk

#

just tried in node, it doesn't work either

#

all i changed is Bun.file to readFileSync to work with node :D

#

this is where the error happens

#

its because i'm not using provideRequestEvent i think

#

yeah probably that

mild bloom
#

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

covert gull
covert gull
#

but everything else works fine

#

with --bun

#

(if you run bun --bun dev bun uses bun runtime, not node)

mild bloom
covert gull
#

oh

#

this is for bundling i think

#

i use vite

mild bloom
covert gull
#

i don't care about bun bundler

#

bun doesn't support solidjs style of jsx

#

that's the only blocker

#

only react/preact works

mild bloom
#

Ye no transforms right, only to h-calls

covert gull
#

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

mild bloom
#

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!

covert gull
#

i fixed it

mild bloom
covert gull