ProductDetails TypeError: Cannot destructure property 'image' of 'product' as it is null.

[Samy Hajar]

Hi! i have been following the tutorial by the closest detail and attention possible.
Here is the error i keep on getting and sadly cannot find any solution for it.

Does somebody has a clue?
here is the error log from the VScode console

This is somehow an issue in [slug].js file.

null error - pages/product/[slug].js (13:10) @ ProductDetails TypeError: Cannot destructure property 'image' of 'product' as it is null. 11 | 12 | const ProductDetails = ({ product, products }) => { 13 | const { image, name, details, price } = product; | ^ 14 | const [index, setIndex] = useState(0); 15 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext(); 16 |

Thanks guys! i have been really spending seven hours trying to solve that and it got frustrating...

[Eric Bourcier-Walsh]

to fix this make sure in sanity go the the banner product and you have to make sure that you have a Product with the slug name that is the same as your "Product" input in the Banner item.

[Saleh Abd Elmoanim]

I also have the same issue and after many tries, finally found the solution
copy this code and replace it in context component

const onAdd = (product, quantity) => {
    // check if product in the cart
    const checkProductInCart = cartItems.find((item) => item.id === product.id);
    foundProduct = cartItems.find((item) => item.id === product.id);
    let newCartItems = cartItems.filter((items) => items.id !== product.id);


    // update total quantity and total price when user click in add to cart
    setTotalQuantities((prevQuantities) => prevQuantities + quantity);
    setTotalPrice((prevPrice) => prevPrice + product.price * quantity);
    if (checkProductInCart) {
      const updateCartItems = cartItems.map((cardProduct,i,arr) => {
        if (cardProduct.id === product.id)
          return [
            ...newCartItems,
            { ...cardProduct, quantity: cardProduct.quantity + quantity },
          ];
      });
      setCartItems(updateCartItems[newCartItems.length]);
    } else {

      // copy product from props because we can't use it directly
      var copyProduct = JSON.parse(JSON.stringify(product));
      copyProduct.quantity = quantity;

      setCartItems([...cartItems, { ...copyProduct }]);
    }
    toast.success(
      `${Qty} ${product.title.substring(0, 18)} added to the cart.`
    );
    setQty(1);
  };

[Brenda-FED]

My simple solution to fix this issue are as follows:

1. In HeroBanner.jsx remove alt="headphones"
   This should fix the error when you select shop now on the HeroBanner."

2. In Sanity make sure the Product slug name matches the Banner product name
   for example Product slug name is headphones (all lowercase) so the Banner product name should be headphones (all lowercase)

[Ochuowo Otiato]

Hi, Like Brenda-FED says, in point 2 "Make sure the product [slug] name matches the Banner product name - right below your button text(Shop Now), find these options in your banner document under content. In addition, if you still get the error, I added the product in question, inside the product document, along with all it's details. This solved the problem for me!

[John Uel Mangaba]

My simple solution to fix this issue are as follows:

1. In HeroBanner.jsx remove alt="headphones"
   This should fix the error when you select shop now on the HeroBanner."
2. In Sanity make sure the Product slug name matches the Banner product name
   for example Product slug name is headphones (all lowercase) so the Banner product name should be headphones (all lowercase)

This works for me. My banner product name before was "Sample", and then I changed it to the same slug from the products to "sample", and you can also see it in the URL; it's a big S, so it's different and wrong.

[Ruslan]

i done everything that is above but it still thow an error (((

[Ochuowo Otiato]

If you have done everything above, try and restart the server. You can do this in two ways, 1 - stop the server and restart it or 2 - stop the whole program from running, close the editor. Restart your computer and then resume your programm, see if the changes you made take effect. With some code editors, changes can be delayed for one reason or the other.

[RomanLTU]

@CTILET the problem also can be quotes. If you followed video and used simple quotes( ' ' ) in const productsQuery:
const productsQuery = '*[_type == "product"]' try use template literals in productsQuery:
const productsQuery = `*[_type` == "product"]`
It worked for me very well.

[Nabintou Sandiouale Fofana]

I had to make sure that in Sanity management , my product name matches exactly the slug. example:
product name: speaker | slug: speaker. If one of them has capital letter at the beginning and the other not, it is going to send error.