Github Pages build fail

[LanxyT1]

Hi everyone, I'm currently trying to build a project in Github Pages, but I'm facing with an issue during the build in github

✓ Compiled successfully Collecting page data ... Generating static pages (0/29) ... [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.] Error occurred prerendering page "/health-project/project". Read more: https://nextjs.org/docs/messages/prerender-error

Tho locally build finishes successfully without any issues.
Here's the code that the build is yelling at

// Next Imports
import React from "react";
import {GetStaticProps} from "next";
// Components
import {projectInfo} from "@/data/health-project-db/project/project-info";
import ProjectInfoSection from "@/components/project-info-section/ProjectInfoSection";

const Project: React.FC<{projectInfo: ProjectInfo}> = ({projectInfo}) => {
    return <ProjectInfoSection projectInfo={projectInfo}/>;
}

export const getStaticProps: GetStaticProps = async () => {
    return {
        props: {
            projectInfo
        }
    };
};

export default Project;

[icyJoseph]

Are you using SVGs? Are you using Windows locally?

[LanxyT1]

Are you using SVGs? Are you using Windows locally?

• Are you using SVGs?

• Yes, I'm importing SVGs in other components. Example: import HealthIcon from "@/assets/icons/hs_bi.svg";

• Are you using Windows locally?

• No, I'm using MacOS

[icyJoseph]

Ok, make sure that the SVGs are correctly imported, like, are you using SVGR?

Since you are using MacOS, case sensitivity can be a problem, cuz in Linux, case sensitivity does matter.

Linux file system treats file and directory names as case-sensitive. FOO.txt and foo.txt will be treated as distinct files

Make sure your file imports are correctly written!

[icyJoseph]

Also make sure that your config files are committed and such. I am guessing an SVG import is at fault here, but without a repository to look at... it could also be a bunch of other things.

[LanxyT1]

After investigating further. It seems like webpack svgr was the issue.
Thanks for the help!

[4anghyeon]

I think you're passing the projectInfo props incorrectly in getStaticProps. Try taking a console.log to see if you're passing the data correctly inside the getStaticProps function at build time.

[weyniis]

Hey, it usually happens during getStaticProps when the data u're returning contains something that Next.js can’t render statically, especially on GitHub Pages or during Vercel builds.

---

🔎 What the error is saying:
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

This usually means that ProjectInfoSection is not being imported correctly as a React component.

---

✅ Here's what you can double-check:

1. Make sure your component has a proper default export

Inside: @/components/project-info-section/ProjectInfoSection.tsx

const ProjectInfoSection = ({ projectInfo }) => {
  return (
    <div>
      {/* your JSX here */}
    </div>
  );
};

export default ProjectInfoSection;

If you’re using a named export instead:

export const ProjectInfoSection = ...

Then your import must be:

import { ProjectInfoSection } from "@/components/project-info-section/ProjectInfoSection";

---

2. Log what you're importing just to confirm it's a function component

Right before using it:

console.log("Component:", ProjectInfoSection);

If it logs undefined or just {}, that confirms your import is broken.

---

3. Check your projectInfo file

The file @/data/health-project-db/project/project-info should only export plain serializable JSON like this:

const projectInfo = {
  title: "Health Tracker",
  year: 2024
};

export default projectInfo;

Make sure it’s not referencing fs, API calls, or dynamic logic. Static exports only!

---

let me know what shows up in the console log if u more question.

[LanxyT1]

Locally next build works correctly. It generates all of the pages without any issues. The problem occurs with building my project in Github.

Here's the yaml file:

# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "22.14.0"
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

It's a standard pre-generated yaml file by Github

[weyniis]

Hi! I understand u're encountering an error during the build process on GitHub Pages, specifically:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

This error typically indicates that a component is not being imported or exported correctly. Let's go through some steps to troubleshoot this issue.

1. Make sure the ProjectInfoSection component is exported properly

If u're using a default export, it should look like this:

// components/project-info-section/ProjectInfoSection.tsx
const ProjectInfoSection = ({ projectInfo }) => {
  return (
    <div>
      {/* Your JSX here */}
    </div>
  );
};

export default ProjectInfoSection;

If u're using a named export, then change the export like this:

export const ProjectInfoSection = ({ projectInfo }) => {
  return (
    <div>
      {/* Your JSX here */}
    </div>
  );
};

And make sure u're importing it correctly:

import { ProjectInfoSection } from "@/components/project-info-section/ProjectInfoSection";

2. Verify the import path

Check that the import path is correct and matches your file structure. A wrong path might silently import undefined and cause the error u're seeing.

3. Check the projectInfo file

Make sure projectInfo contains only static JSON data and nothing dynamic:

// data/health-project-db/project/project-info.ts
const projectInfo = {
  title: "Health Tracker",
  year: 2024,
  description: "Track and visualize health stats"
};

export default projectInfo;


Import it like this:

import projectInfo from "@/data/health-project-db/project/project-info";

4. Avoid using server-only code in getStaticProps

Static generation can’t use server-side modules like fs, path, or process. If your file touches those modules, GitHub Pages build will fail.

5. Log your imports for debugging

Add this in your page before the return statement:

console.log("ProjectInfoSection:", ProjectInfoSection);
console.log("projectInfo:", projectInfo);

If it logs undefined or {}, then u know the import is broken.

📌 Summary:

Confirm if ProjectInfoSection is exported and imported properly

Make sure projectInfo is plain JSON, no dynamic logic

Avoid server-specific logic in static props

Log the values to confirm they're what u expect