NextJS bug: Component props are undefined when building the project (everything works fine on dev mode)

Question

I have this component that works totally fine on dev mode but when building it tells me that the open prop is undefined even though it works fine and when I console.log it on localhost I get the correct result.

const FAQ = ({ faq, index, toggleFAQ }) => {
  return (
    <div
      className={`${Styles.faq} ${faq.open ? Styles.open : ""}`}
      key={index}
      onClick={() => toggleFAQ(index)}>
      <div className={Styles.question}>
        <div className='flex justify-between'>
          <div style={{ width: "90%" }}>
            <span>{faq.question}</span>
          </div>
          <div className='m-auto ml-24'>
            {faq.open ? (
              <img src='faq1.svg' alt='' srcSet='' />
            ) : (
              <img src='faq2.svg' alt='' srcSet='' />
            )}
          </div>
        </div>
      </div>{" "}
      <div className={Styles.answer}>
        <span>{faq.answer}</span>
      </div>
    </div>
  );
};

Where I'm passing the prop:

const FAQpage = () => {
  const [faqs, setfaqs] = useState([
    {
      question: "1",answer:"2",open: true,
    },
    {
      question: "1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
    {
      question:"1",answer:"2",open: false,
    },
  ]);

  const toggleFAQ = (index) => {
    setfaqs(
      faqs.map((faq, i) => {
        if (i === index) {
          faq.open = !faq.open;
        } else {
          faq.open = false;
        }

        return faq;
      })
    );
  };

  return (
    <div>
      <h1 className={Styles.title}>FAQ</h1>
      <div className={Styles.faqs}>
        {faqs &&
          faqs.map((faq, i) => (
            <FAQ faq={faq} key={i} index={i} toggleFAQ={toggleFAQ} />
          ))}
      </div>
    </div>
  );
};

Error running next build:

info - Creating an optimized production build info - Compiled successfully 
info - Collecting page data [= ] info - Generating static pages (0/51) 
Error occurred prerendering page "/components/FAQ". Read more: err.sh/next.js/prerender-error 
TypeError: Cannot read property 'open' of undefined

I can't tell if this is a bug from NextJS side or what, I have been trying to rebuild the project for a while and this same error keeps popping. I have this same error on another component (basically the same concept where I'm passing props this same way). Any help would be really appreciated, thanks

Answer 1

I can't tell just by the code you posted here, but if you are trying to use "getStaticPaths" with "fallback: true", you have to add a condition to check if isFallback, like this:

import { useRouter } from 'next/router'

const App = () => {
  const router = useRouter()

  if (router.isFallback) {
    return <FallbackComponent />
  } else {
    return <MyApp />
  }
}

If you don't want to render a fallback component you can use fallback: "blocking" and it will SSR your page if it is not available. Beware that if your user (or crawler) is accessing a page for the first time it can take a while until the page is completely rendered (and during this time the page will be blank with no interaction).