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

[samyhajar]

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...

[fatkungfu]

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.

[saleh1992]

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]

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!

[imueLx]

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.

[CTILET]

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

[Ochuowo]

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.

[NabintouSFofana]

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.

[juanca305]

Thanks imueLx for the lights. I've been for 3 days trying to fix this. Your solution worked for me.

[lebu7]

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

[lebu7]

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

since your product names are all starting with small letters, use the code below to display them starting with caps in your pages const YourComponent = () => { const capitalizeFirstLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; return (

<. > {capitalizeFirstLetter(item.name)} </. > {/* Other details */}

))} ); };

[lebu7]

All the above didn't work for me, I just started a new project, had sanity setup beforehand, and then copied all my code from the previous folder to make the work simple.

since your product names are all starting with small letters, use the code below to display them starting with caps in your pages const YourComponent = () => { const capitalizeFirstLetter = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; return (

<. > {capitalizeFirstLetter(item.name)} </. > {/* Other details */}

))}

); };

or create a component that capitalizes the first letter(the screenshot attached) then import it where you want to use for example <CapitalizedName name={item.name} /> after importing