Next.js Discord

Discord Forum

Keeping getting these errors while using server side components

Polish Tatra Sheepdog posted this in #help-forum
Open in Discord
Polish Tatra SheepdogOP

10 Replies

Polish Tatra SheepdogOP
jsimport React from "react";

import {notFound} from "next/navigation";
import {fetchComponent} from "@/app/lib/data";
import {Component, Permission} from "@/app/lib/types";
import {ComponentDetails} from "@/app/ui/components/component/details";
import {ComponentRevision, RevisionComments, RevisionDetails} from "@/app/ui/components/component/revision";

export default async function Page({params}: { params: { name: string, id: string } }) {
    const data =;
    const name = data.split('%40')[0]
    const revisionId =;
    const version = data.split('%40')[1];
    if (isNaN(Number(version))) notFound();

    const payload = await fetchComponent(name, parseInt(version)) as any;

    if (!payload) notFound();

    let permission = payload.permission as Permission
    let component = as Component;

    let revision = component.revisions.find((r) => === revisionId);
    if(!revision) return notFound();

    return (<div className='min-h-[calc(100vh-100px)] relative w-full'>
        <div className='grid gap-6 lg:grid-cols-4 relative'>
            <ComponentRevision revision={revision} component={component} permission={permission}/>
            <ComponentDetails revision={revision} component={component} permission={permission}>
                <RevisionDetails permission={permission} revision={revision}/>
                <RevisionComments revision={revision} component={component}/>
if I restart dev server and reload the page it works, but if I navigate to a different page which uses server side components it'll throw an error for the page with the same scope.
also happens for api routes
should you require more info let me know
DirtyCajunRice | AppDir
do you have an error.js
Polish Tatra SheepdogOP
'use client'

export default function Error({
                              }: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    return (
        <div className='min-h-[calc(100vh-100px)] flex items-center justify-center flex-col gap-2'>
                className='text-primary underline'
                    () => reset()
                Try again
the layout is pretty much useless, shouldn't think it would cause a problem.
Would it be best to create a repo & invite one of you so you can dive deep?
I understand if you don't have the resources to do so