ReferenceError on something that should (and DO) exist
tl;dr: getting a reference error on an existing (declared and in scope) variable:
The best is to check this reproductible example:
https://stackblitz.com/github/binajmen/budget?file=src%2Fpages%2Fcategories.tsx
I'm pretty sure I'm doing something wrong, but I can't figure out what..
categories.tsx:33 Uncaught ReferenceError: categories is not defined
at get when (categories.tsx:33:20)
at Switch.createMemo.equals.equals [as fn] (chunk-DIOA272S.js?v=36072530:1608:28)
at runComputation (chunk-DIOA272S.js?v=36072530:800:22)
at updateComputation (chunk-DIOA272S.js?v=36072530:782:3)
at createMemo (chunk-DIOA272S.js?v=36072530:344:10)
at Switch (chunk-DIOA272S.js?v=36072530:1604:22)
at chunk-DIOA272S.js?v=36072530:647:12
at untrack (chunk-DIOA272S.js?v=36072530:536:12)
at Object.fn (chunk-DIOA272S.js?v=36072530:643:37)
at runComputation (chunk-DIOA272S.js?v=36072530:800:22)
categories.tsx:33 Uncaught ReferenceError: categories is not defined
at get when (categories.tsx:33:20)
at Switch.createMemo.equals.equals [as fn] (chunk-DIOA272S.js?v=36072530:1608:28)
at runComputation (chunk-DIOA272S.js?v=36072530:800:22)
at updateComputation (chunk-DIOA272S.js?v=36072530:782:3)
at createMemo (chunk-DIOA272S.js?v=36072530:344:10)
at Switch (chunk-DIOA272S.js?v=36072530:1604:22)
at chunk-DIOA272S.js?v=36072530:647:12
at untrack (chunk-DIOA272S.js?v=36072530:536:12)
at Object.fn (chunk-DIOA272S.js?v=36072530:643:37)
at runComputation (chunk-DIOA272S.js?v=36072530:800:22)
1 Reply
the code:
import { createQuery } from "@tanstack/solid-query";
import { For, Match, Switch } from "solid-js";
import { RESTClient } from "../lib/restclient";
type Category = {
id: string;
name: string;
};
export default function Categories() {
const categories = createQuery<Category[]>(() => ({
queryKey: ["categories"],
queryFn: async () => {
const rest = new RESTClient({ debug: true });
const response = await rest.performRequest({
method: "GET",
path: "/api/categories",
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.data as Category[];
},
}));
console.log({ categories });
return (
<div>
<h1>Categories</h1>
<p>{String(Boolean(categories))}</p>
<Switch>
<Match when={categories.isPending}>
<p>Loading...</p>
</Match>
<Match when={categories.isError}>
<p>Error: {categories.error!.message}</p>
</Match>
<Match when={categories.isSuccess}>
<p>Success</p>
<For each={categories.data!}>
{(category) => <p>{category.name}</p>}
</For>
</Match>
</Switch>
</div>
);
}
import { createQuery } from "@tanstack/solid-query";
import { For, Match, Switch } from "solid-js";
import { RESTClient } from "../lib/restclient";
type Category = {
id: string;
name: string;
};
export default function Categories() {
const categories = createQuery<Category[]>(() => ({
queryKey: ["categories"],
queryFn: async () => {
const rest = new RESTClient({ debug: true });
const response = await rest.performRequest({
method: "GET",
path: "/api/categories",
});
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.data as Category[];
},
}));
console.log({ categories });
return (
<div>
<h1>Categories</h1>
<p>{String(Boolean(categories))}</p>
<Switch>
<Match when={categories.isPending}>
<p>Loading...</p>
</Match>
<Match when={categories.isError}>
<p>Error: {categories.error!.message}</p>
</Match>
<Match when={categories.isSuccess}>
<p>Success</p>
<For each={categories.data!}>
{(category) => <p>{category.name}</p>}
</For>
</Match>
</Switch>
</div>
);
}