Products in cart are not showing and when I click add cart button it goes blank

[Alba1020]

I am getting these errors in console after clicking add to cart button, strangely enough when I reload the page it will show correct updated number of products. However, I still don't see anything when I go on the cart section besides the title. Anyone had this issue or maybe have any idea what is causing it

[crimsoncreates]

I also have this same error with total_items

[kevdau03]

Same error here. Any fix OP?

[Oluwa-bunmi]

I'm having the same issue, anyone with possible solutions?

[Uwill18]

I am having the same issues. If I figure it out I will let you guys know. I think it has something to do with :

--mounting the component --the useState hook or --the icon used

https://www.geeksforgeeks.org/what-does-it-mean-for-a-component-to-be-mounted-in-reactjs/#:~:text=Mounting%20is%20the%20initial%20phase,being%20present%20in%20the%20DOM.

https://reactjs.org/docs/react-component.html#mounting

https://daveceddia.com/usestate-hook-examples/

https://mui.com/material-ui/getting-started/installation/

[Oluwa-bunmi]

Hey guys, I found the reason for the blank page. In the App.js, make sure these async functions are written exactly like this, don't destructure the cart yet:

const handleAddToCart = async (productId, quantity) => { const item = await commerce.cart.add(productId, quantity); setCart(item); }; const handleUpdateCart = async (productId, quantity) => { const item = await commerce.cart.update(productId, { quantity }); setCart(item); }; const handleRemoveFromCart = async (productId) => { const item = await commerce.cart.remove(productId); setCart(item); }; const handleEmptyCart = async () => { const item = await commerce.cart.empty(); setCart(item); };

[Uwill18]

Thank you @Oluwa-bunmi! That is super helpful!

[developerUmair]

@Oluwa-bunmi Thanks buddy, saved tons of time

[Auzaiealias]

Thank you @Oluwa-bunmi :)