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 :)