Search code examples
javascriptnext.jssanity

getStaticProps/Paths getting "Application Error: A client-side exception has occurred"


Explanation

Using this code to fetch a list of products, however I am receiving this error anytime I attempt to load a dynamic [product].js route? Can't figure out what is going wrong as I have the same setup for 2 other dynamic routes with the pages being [photos].js and [slug].js and they load perfectly fine, I have even tried copying the code from those working pages and replacing album or post with product to no avail.

I have double checked my Groq queries with sanity studio vision and they are returning the data that I need.

Any help would be greatly appreciated. Thank you, Mac.

Code

[product].js

import sanity from 'sanity';
import DetailsPane from './details';
import ImagesPane from './images';

export const getStaticPaths = async () => {
  const products = await sanity.fetch(`
  *[_type == "product" && !(_id in path("drafts.**"))]{
    slug{
      current
    }
  }
  `);

  return products.map(({ slug }) => ({
    params: { product: slug.current }
  }));
};

export const getStaticProps = async ({ params }) => {
  const product = await sanity.fetch(
    `
  *[slug.current == $product]{
    name, description, category, images, in_stock, options, price, available_in
  }
  `,
    { product: params.product }
  );

  return {
    props: {
      product
    }
  };
};

const Product = ({ product }) => {
  console.log(product);
  return (
    <div className="flex items-center justify-center space-x-4">
      <DetailsPane {...product} />
      <ImagesPane images={product.images} />
    </div>
  );
};

export default Product;

Full Error

APPLICATION ERROR: A CLIENT-SIDE EXCEPTION HAS OCCURRED (SEE THE BROWSER CONSOLE FOR MORE INFORMATION).

Browser Console

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (logo-tote-bag, line 0)

Solution

  • My Bad Really Simple Answer

    I have just started using the pageExtensions module from next, located here and forgot to add .page.js to [product].js.

    Apologies.