TypeError: Cannot read properties of undefined (reading 'subscribe')

Hi, I have the following code and I keep getting the error "Cannot read properties of undefined (reading 'subscribe'), and I can't figure out how to fix it. This is the code:
export default function Page({ params }: { params: { subject: string } }) {
const router = useRouter();
const pathname = usePathname()
const segments = pathname.split('/');
const subject = segments[2];
const topic = segments[3];

const { data: topics, isLoading: topicsLoading } = useQuery(
['topics'],
async () => {
const response = await fetch('/api/topiclist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((topic: { name: string }) => topic.name.toLowerCase());
}
);

const { data: subjects, isLoading: subjectsLoading } = useQuery(
['subjects'],
async () => {
const response = await fetch('/api/subjectlist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((subject: { name: string }) => subject.name.toLowerCase());
}
);

if (subjects && !subjects.includes(subject)) {
return <p>Exam not found</p>;
}

const capitalizedSubject =
params.subject.charAt(0).toUpperCase() + params.subject.slice(1);

return (
<div>
<h1>{capitalizedSubject} Page</h1>

<h2>Topics for ID: </h2>
<ul>
{topicsLoading ? (
<div>Loading topics...</div>
) : topics && topics.length > 0 ? (
topics.map((topic: string, index: number) => (
<CommandItem key={index}>
<Calendar className="mr-2 h-4 w-4" />
<Link href={`/exams/${topic}`}>{topic}</Link>
</CommandItem>
))
) : (
<div>No topics available.</div>
)}
</ul>
</div>
);
}
export default function Page({ params }: { params: { subject: string } }) {
const router = useRouter();
const pathname = usePathname()
const segments = pathname.split('/');
const subject = segments[2];
const topic = segments[3];

const { data: topics, isLoading: topicsLoading } = useQuery(
['topics'],
async () => {
const response = await fetch('/api/topiclist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((topic: { name: string }) => topic.name.toLowerCase());
}
);

const { data: subjects, isLoading: subjectsLoading } = useQuery(
['subjects'],
async () => {
const response = await fetch('/api/subjectlist');
const data = await response.json();
console.log(data); // Log the response data
return data.map((subject: { name: string }) => subject.name.toLowerCase());
}
);

if (subjects && !subjects.includes(subject)) {
return <p>Exam not found</p>;
}

const capitalizedSubject =
params.subject.charAt(0).toUpperCase() + params.subject.slice(1);

return (
<div>
<h1>{capitalizedSubject} Page</h1>

<h2>Topics for ID: </h2>
<ul>
{topicsLoading ? (
<div>Loading topics...</div>
) : topics && topics.length > 0 ? (
topics.map((topic: string, index: number) => (
<CommandItem key={index}>
<Calendar className="mr-2 h-4 w-4" />
<Link href={`/exams/${topic}`}>{topic}</Link>
</CommandItem>
))
) : (
<div>No topics available.</div>
)}
</ul>
</div>
);
}
When I hard refresh the page, it loads for a second and renders but then immediately after the error comes.
2 Replies
bakdaddy
bakdaddy17mo ago
could you paste the full console error? it seems like there's a variable somewhere in nested components (either CommandItem or Calendar)
wlvz
wlvz17mo ago
i managed to fix it, the issue was with the way i was mapping the data, i just got rid of that and rewrote it from scratch and changed it a little and then it worked
Want results from more Discord servers?
Add your server