Cannot read properties of undefined (reading 'mode')

[SlenderShield]

Bug Description

The application encounters a "TypeError: Cannot read properties of undefined (reading 'return')" error during the fetching and processing of product data. This error occurs specifically within the fetchProducts function in product.js (line 56, character 9, as initially reported), despite the fetchProducts function being structured to handle the expected API response format ({ data: [...] }). This indicates a discrepancy between the expected and actual API response, or a potential issue in a different part of the codebase.

product.js

import { create } from "zustand";

export const useProductStore = create((set) => ({
  products: [],
  setProducts: (products) => set({ products }),
  createProduct: async (newProduct) => {
    if (!newProduct.name || !newProduct.price || !newProduct.image) {
      return {
        success: false,
        message: "Please provide all the required data",
      };
    }
    try {
      const res = await fetch(`/api/products`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(newProduct),
      });

      if (!res.ok) {
        const errorData = await res.json();
        return {
          success: false,
          message: errorData.message || `HTTP error! status: ${res.status}`,
        };
      }

      const data = await res.json();

      set((state) => ({
        products: [...state.products, data.data],
      }));
      return { success: true, message: "Product created successfully." };
    } catch (error) {
      console.error("Error creating product:", error);
      return {
        success: false,
        message: "An error occurred while creating the product.",
      };
    }
  },
  fetchProducts: async () => {
    try {
      const res = await fetch(`/api/products`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      });

      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }

      const data = await res.json();

      if (data && data.data) {
      console.log(data.data); // Give the data in the console.
        set({ products: data.data });
      } else {
        console.error("Invalid data format from API:", data);
      }
    } catch (err) {
      console.error("Fetch error:", err);
    }
  },
  deleteProduct: async (pid) => {
    try {
      const res = await fetch(`/api/products/${pid}`, {
        method: "DELETE",
      });
      const data = await res.json();
      if (!data.success) return { success: false, message: data.message };

      set((state) => ({
        products: state.products.filter((product) => product._id !== pid),
      }));
      return { success: true, message: data.message };
    } catch (error) {
      console.error("Error deleting product:", error);
      return {
        success: false,
        message: "An error occurred while deleting the product.",
      };
    }
  },
}));

I have given the code base.
I check all the possible things from side.

Reproduction Link

https://github.com/SlenderShield/Arohana

[dbritto-dev]

hmm hard to know what's happening seems a implementation issues than zustand issue from POV