getting Server Error Error: [object Object] in next 13

Question

new to next and use to using react, I'm trying to use Shopify Buy Sdk to get some products for my shopify app. It's been really difficult to understand why i'm getting this error. I'm using this article as a reference guide https://blog.logrocket.com/build-ecommerce-app-nextjs-shopify/.

I get this error : Uncaught Error: [object Object] at getProperError at DevServer.renderToResponseImpl etc, while trying ot use getStaticProps function.

Why is this happening?

index.jsx (shop page)

import Product_Card from '@/components/Product_Card'
import { shopifyClient, parseShopifyResponse } from '@/utils/shopify'

    const Products = ({ products }) => {
       // console.log(products)
    
      return (
        <div className='shop-grid'>
          <Product_Card/>
        </div>
      )
    }
    
    export const getServerSideProps = async () => {
       // Fetch all the products
       const products = await shopifyClient.product.fetchAll();
    
    
       return {
        props: {
         products: parseShopifyResponse(products),
       },
      };
     };
    
    export default Products

inside Utils folder i have shopify.js

  import Client from 'shopify-buy';
    
    // Initializing a client to return content in the store's primary language
    export const shopifyClient = Client.buildClient({
       domain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_URL,
       storefrontAccessToken: process.env.NEXT_PUBLIC_SHOPIFY_ACCESS_TOKEN
     });
    
     export const parseShopifyResponse = (response) =>  JSON.parse(JSON.stringify(response));