Next.js Discord

Discord Forum

Error during next build

Answered
Green Kingfisher posted this in #help-forum
Open in Discord
Green KingfisherOP
Everything working fine on local but on build it gives error: 
Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'data')
    at l (/home/vishal/linkgrid-client/.next/server/chunks/28.js:48:2496)
    at async p (/home/vishal/linkgrid-client/.next/server/chunks/28.js:48:2667)
Export encountered an error on /(root)/dashboard/page: /dashboard, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null


Grid List component: 
import { getGrids } from '@/actions/grid.action';
import GridListItem from '@/app/(root)/dashboard/_components/grid-list-item';
import ErrorMessage from '@/components/error-message';

const GridsList = async () => {
  const grids = await getGrids();

  if (!grids?.success) return <ErrorMessage>{grids?.message}</ErrorMessage>;

  return (
    <>
      {grids?.data?.map((grid) => {
        return <GridListItem grid={grid} key={grid._id} />;
      })}
    </>
  );
};

export default GridsList;


Api function: 
import { authApi } from '@/lib/auth-api';
import { ApiResponseType, GridType } from '@/types/types';

export const getGrids = async (): Promise<ApiResponseType<GridType[]>> => {
  try {
    const res = await authApi.get('/grids');

    return res.data;
  } catch (error: any) {
    return error.response.data;
  }
};


authApi is a axios instance that add access token in request interceptor.
Answered by Black Turnstone
have you tried force-dynamic?
View full answer

6 Replies

Green KingfisherOP
dashboard layout:

import DashboardSidebar from '@/app/(root)/dashboard/_components/dashboard-sidebar';
import { SidebarProvider } from '@/components/ui/sidebar';

const DashboardLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <main>
      <SidebarProvider>
        <DashboardSidebar />
        {children}
      </SidebarProvider>
    </main>
  );
};

export default DashboardLayout;

dashboard sidebar:
import DashboardSidebarFooter from '@/app/(root)/dashboard/_components/dashboard-sidebar-footer';
import GridsList from '@/app/(root)/dashboard/_components/grids-list';
import Brand from '@/components/brand';
import Loader from '@/components/ui/loader';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
} from '@/components/ui/sidebar';
import { Suspense } from 'react';

const DashboardSidebar = () => {
  return (
    <Sidebar>
      <SidebarHeader>
        <Brand logoClassName='h-8 w-8' brandClassName='text-3xl' />
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup className='space-y-2'>
          <SidebarGroupLabel className='text-lg'>Grids</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <Suspense fallback={<Loader />}>
                <GridsList />
              </Suspense>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <Suspense fallback={<Loader />}>
          <DashboardSidebarFooter />
        </Suspense>
      </SidebarFooter>
    </Sidebar>
  );
};

export default DashboardSidebar;
Black Turnstone
have you tried force-dynamic?
Answer
@Black Turnstone have you tried force-dynamic?
Green KingfisherOP
yes
i have put it in GridList component do i need to put it in layout?
oh i put it in layout now its working.