Error: Invalid `paths` value returned from getStaticPaths (without any changes on files) Slug

Issue

This Content is from Stack Overflow. Question asked by xen1661

iam recently receiving this error message without any changes to files. I deleted some products and categories via the webGUI which might cause this?

Environment is:
Frontend: React, Next.js, TypeScript & Tailwind
Backend: Laravel

Error:

> Build error occurred
Error: Invalid `paths` value returned from getStaticPaths in /category/[slug].
`paths` must be an array of strings or objects of shape { params: [key: string]: string }
    at buildStaticPaths (/var/www/domain/node_modules/next/dist/build/utils.js:490:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async /var/www/domain/node_modules/next/dist/build/utils.js:615:119
    at async Span.traceAsyncFn (/var/www/domain/node_modules/next/dist/telemetry/trace/trace.js:60:20) {
  type: 'Error'
}

Category Slug tsx content:

import Container from "@components/ui/container";
import { getLayout } from "@components/layout/layout";
import Subscription from "@components/common/subscription";
import CategoryBanner from "@containers/category-banner";
import { useRouter } from "next/router";
import CategoryProductsGrid from "@components/category/category-products-grid";

export { getStaticPaths, getStaticProps } from "@framework/ssr/category";

export default function Category() {
  const { query } = useRouter();

  return (
    <div className="border-t-2 border-borderBottom">
      <Container>
        <CategoryBanner className="my-4"/>
        <div className="pb-16 lg:pb-20">
          <CategoryProductsGrid
            classname="3xl:grid-cols-6"
            categorySlug={query?.slug as string}
          />
        </div>
        <Subscription />
      </Container>
    </div>
  );
}

Category.getLayout = getLayout;

SSR for category.ts:

// This function gets called at build time
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const categories = await fetchCategories({
    queryKey: [API_ENDPOINTS.CATEGORIES, { limit: 100, parent: null }],
  });
  const paths = categories?.data?.flatMap((category: Category) =>
    locales?.map((locale) => ({ params: { slug: category.slug }, locale }))
  );
  return {
    paths,
    fallback: "blocking",
  };
}

Notes:

  • the only changes were made before the error occured via the webGUI (deleted products).
  • i deleted all locales on configured one locale. Maybe theres an issue. But after these changes the build ran fine for a week.
  • when i run the same code on my local computer with the same node etc. Versions it works. Is there any cache that must be deleted to make it work again?

Thank you in advance for any tip that could cause this. I tried alot of things but cant figure it out yet.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?