Blog pages rendered perfectly on development mode but doesn't work on build

[ksoenandar]

Hi all,

I'm building a personal website with a blog section on the page. I've done all the development locally and everything works and I wanted to try to deploy it to Vercel. However, the build process continuously fails at generating the blog pages, which works perfectly in the development mode.

Here is the /blog/[id].jsx code

import { useState, useEffect } from 'react';
import Prismic from 'prismic-javascript';
import {
    motion,
    useViewportScroll,
    useSpring,
    useTransform,
} from 'framer-motion';

import { client } from '../../utils/prismic';
import { sliceParser } from '../../lib/helper';

function BlogPage({ body, publishedDate }) {
    // set scroll progress
    const [isComplete, setIsComplete] = useState(false);
    const { scrollYProgress } = useViewportScroll();
    const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1]);
    const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 });

    useEffect(() => {
        yRange.onChange((v) => {
            setIsComplete(v >= 1);
        });
    });

    const dateOptions = { day: 'numeric', month: 'long', year: 'numeric' };
    const pubDate = new Date(publishedDate).toLocaleDateString(
        'au-EN',
        dateOptions
    );

    return (
        <motion.div
            className='flex flex-col mx-auto w-9/12 lg:w-8/12 px-4 pt-4 pb-16 text-justify'
            initial='initial'
            animate='enter'
            exit='exit'
            variants={{
                initial: { opacity: 0 },
                enter: { opacity: 1, transition: { duration: 0.75 } },
                exit: { opacity: 0, transition: { duration: 0.25 } },
            }}>
            {body.map((slice, index) => {
                return sliceParser(slice, index);
            })}
            <svg
                className='fixed top-24 left-2 lg:left-8 h-16 w-16'
                viewBox='0 0 60 60'>
                <motion.path
                    fill='none'
                    strokeWidth='5'
                    stroke='#553C9A'
                    strokeDasharray='0 1'
                    d='M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0'
                    style={{
                        pathLength,
                        rotate: 90,
                        translateX: 5,
                        translateY: 5,
                        scaleX: -1, // Reverse direction of line animation
                    }}
                />
                <motion.path
                    fill='none'
                    strokeWidth='5'
                    stroke='#553C9A'
                    d='M14,26 L 22,33 L 35,16'
                    initial={false}
                    strokeDasharray='0 1'
                    animate={{ pathLength: isComplete ? 1 : 0 }}
                />
            </svg>
        </motion.div>
    );
}

export default BlogPage;

export async function getStaticPaths() {
    const res = await client.query(
        Prismic.Predicates.at('document.type', 'blog'),
        { orderings: '[my.blog.last_publication_date desc]' }
    );
    const document = res.results;
    const paths = document.map((doc) => ({
        params: { id: doc.uid },
    }));

    return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
    const res = await client.getByUID('blog', params.id);
    const document = { ...res.data, publishedDate: res.first_publication_date };
    return { props: document };
}

I keep on getting the following error

Error occurred prerendering page "/blog/[id]". Read more: https://err.sh/next.js/prerender-error TypeError: Cannot read property 'map' of undefined

Build error occurred
Error: Export encountered errors on following paths:
/blog/[id]

As I said, this code works perfectly fine in development mode. I tried console logging it every step of the way. So the getStaticPaths worked fine, it passed the correct path to the getStaticProps function. The getStaticProps also works fine as it returns the correct data. However, oddly enough, if I console logged "body" outside of the render function, I can see the data. But the error message suggests to me that somehow it's being returned as undefined.

Any help is appreciated!