Next.js Discord

Discord Forum

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for

Unanswered
Fire ant posted this in #help-forum
Open in Discord
Fire antOP
I got this error on latest canary, i had to rollback to canary 52 to get rid of it

What is this? error on importing? My code editor
didnt show any error on importing invalid export functions/component....so how to track this?

I dont know why in canary 52 dont have this error

23 Replies

Fire antOP
it was 
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Standard Chinchilla
Can you send the page component
@Standard Chinchilla Can you send the page component
Fire antOP
import React, { Suspense } from "react";
import dynamic from "next/dynamic";
import HomeChipSkeleton from "@/components/layout/skeleton/home-skeleton";
import ReelSkeleton from "@/components/layout/skeleton/reel-skeleton";
import VideoSkeleton from "@/components/layout/skeleton/skeleton";
import ContainerGrid from "@/components/layout/ui/container/container-grid";
import VideoGrid from "@/components/layout/ui/container/video-grid";
import ShelfContainer from "@/components/layout/ui/container/shelf-container";
import ReelItem from "@/components/home/shelf/reel-item";
import VideoItem from "@/components/home/shelf/video-item";
import RenderHome from "@/components/home/home-feed";
import LoadMore from "@/components/home/load-more";


const FeedChipBar = dynamic(() => import("@/components/home/chip"), {
  ssr: false,
  loading: () => <HomeChipSkeleton />,
});

export default async function HomePage() {

  return (
    <>
      <ContainerGrid>
        <h2 className="text-center mx-auto py-5 text-2xl font-sans font-medium">
          <FeedChipBar />
        </h2>
        <ShelfContainer>
          <Suspense fallback={<ReelSkeleton />}>
            <ReelItem />
          </Suspense>
        </ShelfContainer>
        <VideoGrid>
          <Suspense fallback={<VideoSkeleton />}>
            <VideoItem />
          </Suspense>
          <Suspense fallback={<VideoSkeleton />}>
            <RenderHome />
          </Suspense>
          <Suspense fallback={<VideoSkeleton />}>
            <LoadMore />
          </Suspense>
        </VideoGrid>
      </ContainerGrid>
    </>
  );
}
this /app/page.tsx
Standard Chinchilla
are you using typescript worksapce version
maybe that will help by giving an error'
@Standard Chinchilla are you using typescript worksapce version
Fire antOP
no i didnt use that
Standard Chinchilla
@Standard Chinchilla Click to see attachment
Fire antOP
Select this?
Standard Chinchilla
no you don't have it for some reason
Fire antOP
where can i get it?
Standard Chinchilla
it should look like this
Are all the components you are rendering react components
maybe on of them is returning an object instead of a element
try commenting everything out and uncommenting a component one by one until something breaks and lmk
@Standard Chinchilla it should look like this
Fire antOP
how to get like this?
Standard Chinchilla
create a new project with: 
npx create-next-app@latest
@Standard Chinchilla maybe on of them is returning an object instead of a element
Fire antOP
yeah im still checking, its hard when had soo many component
Fire antOP
it happens in 
next start
in 
next dev
its working and no error...
the error comes after build
Standard Chinchilla
Is there any message you are getting in build
Also why are you using the canary version