I want to build app locally, but I can't always same:

Error occurred prerendering page "/_not-found". Read more: 
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at nF ...
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

node -v
v22.11.0

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gsap/react": "^2.1.2",
    "@strapi/blocks-react-renderer": "^1.0.2",
    "gsap": "^3.12.7",
    "leaflet": "^1.9.4",
    "lenis": "^1.2.3",
    "next": "^15.2.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-leaflet": "^5.0.0",
    "swiper": "^11.2.5",
    "yet-another-react-lightbox": "^3.21.8"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4",
    "@types/leaflet": "^1.9.16",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

In root of app I have not-found.tsx

I want to build app locally, but I can't always same:

Error occurred prerendering page "/_not-found". Read more: https://nextjs./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.
    at nF ...
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

node -v
v22.11.0

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gsap/react": "^2.1.2",
    "@strapi/blocks-react-renderer": "^1.0.2",
    "gsap": "^3.12.7",
    "leaflet": "^1.9.4",
    "lenis": "^1.2.3",
    "next": "^15.2.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-leaflet": "^5.0.0",
    "swiper": "^11.2.5",
    "yet-another-react-lightbox": "^3.21.8"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4",
    "@types/leaflet": "^1.9.16",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

In root of app I have not-found.tsx

• reactjs
• next.js
• build

1 Answer 1

This happens when you use a composite component on page level. because Next.js looks for pages only in the app/pages directory, and if you have created any UI component in the pages and exporting it, then you'll get this error.

Solution: Remove all the components that you have created in any page and move them to a separate tsx/jsx file.

let's say you have a page that is index.tsx

const Index = () => {

  return (
    <>
      {/* <HomeScreenWrapper /> */}
      <div className='' ref={fwdRef}>
        <ErrorBoundary fallback={<ErrorMessage />}>
          <CanvasWrapper fwdRef={fwdRef} />
        </ErrorBoundary>
      </div>
    </>
  )
}

export const  Abe = ({ isLight = false }: Props) => {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/glbs/Abe.glb')
  const { actions } = useAnimations(animations, group)
  return (
    <group ref={group} dispose={null}>
      <group name='Scene'>
        <group name='abe' rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorigHips} />
          <skinnedMesh
            frustumCulled={false}
            name='Ch39'
            geometry={nodes.Ch39.geometry}
            material={materials.Ch39_Body}
            skeleton={nodes.Ch39.skeleton}
          />
        </group>
      </group>
    </group>
  )
}



export default Index

Now, in the given example, you see there is a component in the next.js page file and I am exporting it to use somewhere. It'll throw error on build time. So you need to remove Abe component from here and move it to a separate file.