NextJS build and deployment error with Vercel

Question

I keep having errors trying to deploy my Nextjs app to vercel:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: (0 , react_development_.useState) is not a function or its return value is not iterable
    at Categories (/vercel/path0/.next/server/chunks/930.js:122:72)
    at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:686:46)
    at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:514:20)
    at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)

I tried npm run build locally and I get this error:

> Build error occurred
Error: Export encountered errors on following paths:
        /
        /post/[slug]: /post/first-post
        /post/[slug]: /post/how-html-css-js-work
        /post/[slug]: /post/nextjs
        /post/[slug]: /post/react-hooks

So I assume it has to be something inside my index page and /post/[slug] page. I tried everything like setting getStaticPaths fallback to false and using optional chaining everywhere but I still get the error.

Can someome please help me out, it is so depressing when I finished the project and I can run it in my localhost but and failed in the deployment/build time.

My / page:

import Head from "next/head";
import { PostCard, Categories, PostWidget } from "../components";
import { getPosts } from "../services";

export default function Home({ posts }) {
  const sortedPosts = posts.sort(
    (a, b) => new Date(b.node.createdAt) - new Date(a.node.createdAt)
  );

  return (
    <>
      <Head>
        <title>JBLOG | Home</title>
      </Head>
      <section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
        <div className="max-w-7xl mx-auto py-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
            <div className="md:col-span-8 col-span-1 ">
              {sortedPosts?.map((post) => (
                <PostCard key={post.node.title} post={post.node} />
              ))}
            </div>

            <div className="md:col-span-4 col-span-1">
              <div className="md:sticky relative md:top-[110px]">
                <PostWidget />
                <Categories />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export async function getStaticProps() {
  const posts = (await getPosts()) || [];

  return {
    props: {
      posts,
    },
  };
}

My /post/slug page:

import React from "react";
import Head from "next/head";
import { getPosts, getPostDetails } from "../../services";
import {
  PostDetail,
  Categories,
  PostWidget,
  Author,
  Comments,
  CommentsForm,
} from "../../components";
import { useRouter } from "next/router";

const Post = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <Head>
        <title>{post?.title}</title>
      </Head>
      <section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
        <div className="max-w-7xl mx-auto py-10">
          <div className="grid grid-cols-1 md:grid-cols-12 md:gap-6">
            <div className="md:col-span-8 col-span-1 ">
              <PostDetail post={post} />
              <CommentsForm slug={post?.slug} />
              <Comments slug={post?.slug} />
            </div>

            <div className="md:col-span-4 col-span-1">
              <div className="md:sticky relative md:top-[110px]">
                <Author author={post?.author} />
                <PostWidget
                  slug={post?.slug}
                  categories={post?.categories?.map(
                    (category) => category.slug
                  )}
                />
                <Categories />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Post;

export const getStaticProps = async (context) => {
  const data = await getPostDetails(context.params.slug);

  return {
    props: {
      post: data,
    },
  };
};

export const getStaticPaths = async () => {
  const posts = await getPosts();

  return {
    paths: posts.map((post) => ({ params: { slug: post.node.slug } })),
    fallback: true,
  };
};

The error mentions `useState` but the code you posted has no reference to it. Can you post the component(s) where you use the `useState` hook? Most likely `Categories` or `PostWidget` as they are both common to the erroring routes. — juliomalves, Jan 05 '22 at 18:24

score 0 · Answer 1 · answered Jan 02 '22 at 05:15

0

what's your npm run build? https://nextjs.org/docs/basic-features/data-fetching

fallback: true is not supported when using next export.

answered Jan 02 '22 at 05:15

Jerry

188
5

I am using ```next build``` in my ```npm run build```. – jethro-dev Jan 02 '22 at 18:38
I found a similar one https://stackoverflow.com/questions/65425601/next-js-build-failing-due-to-export-encountered-errors-on-following-paths hope it can help. try to log the data in 'post/slug getStaticProps function' and see what you get. it may caused by passing improper props data to children components of 'post/slug' – Jerry Jan 02 '22 at 22:31

NextJS build and deployment error with Vercel

1 Answers1