Cannot read property 'product' of null

I’m seeing my Shopify products come through into Sanity via the webhook but whenever I add a product to a page and click it, I am met with the following error when navigating to the URL (/products/<slug>)

Server Error
TypeError: Cannot read property 'product' of null

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/products/[slug].js (60:46) @ Product

  58 |   console.log(data)
  59 |   // set our Product state
> 60 |   const [product, setProduct] = useState(page.product)
     |                                              ^
  61 | 
  62 |   // find the default variant for this product by matching against the first product option
  63 |   const defaultVariant = page.product.variants?.find((v) => {

Is there something special I need to do for a Shopify product to have a “detail” page?

[stephensilber]

Thanks for the link! I figured out that my issue was related to the isDraft flag in the above getProduct query (my client had uploaded all of their products but had not set them as active). I did try to pull in the latest changes via that stack overflow post but I was looking at ~35-40 files with merge conflicts so quickly gave up on that. Gonna mark this as closed…thanks again for the quick responses.

[ndimatteo]

@stephensilber no problem!

Unfortunately, I don’t have any specific instructions on how to do that but perhaps this would help:

https://stackoverflow.com/questions/56577184/github-pull-changes-from-a-template-repository