MEDIUM: Frontend JS errors on load — e.value.filter/find/map is not a function #98

New issue

Closed

opened 2026-04-18 09:02:56 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-04-18 09:02:56 -07:00

Owner

Summary

Multiple JavaScript runtime errors occur immediately on page load, preventing correct rendering of inventory, receipts, and recipe views.

Error Messages

From browser console on http://localhost:8515:

TypeError: e.value.filter is not a function (InventoryList computed property — appears twice)
Failed to load receipts: TypeError: M.map is not a function (ReceiptsView)
TypeError: e.value.find is not a function (MealPlanView or RecipesView computed)

Impact

Inventory filter computed crashes on load
Receipts list fails to load
Recipe or meal plan view computed crashes on load
Build Your Own templates render as blank cards (related)

Likely Root Causes

The errors suggest a reactive ref is receiving a non-array value where an array is expected. Possible sources:

A store initializes with a non-array default that gets replaced before first render
An API response is being assigned to the wrong store slot (object instead of array)
A Pinia store's reactive ref is being set to undefined or an object on first load before the API call completes

Investigation Steps

Add defensive array checks in store computed properties
Check if any API response handler returns an object instead of an array on certain code paths
Verify Pinia store initialization order during SSR/hydration

## Summary Multiple JavaScript runtime errors occur immediately on page load, preventing correct rendering of inventory, receipts, and recipe views. ## Error Messages From browser console on `http://localhost:8515`: 1. `TypeError: e.value.filter is not a function` (InventoryList computed property — appears twice) 2. `Failed to load receipts: TypeError: M.map is not a function` (ReceiptsView) 3. `TypeError: e.value.find is not a function` (MealPlanView or RecipesView computed) ## Impact - Inventory filter computed crashes on load - Receipts list fails to load - Recipe or meal plan view computed crashes on load - Build Your Own templates render as blank cards (related) ## Likely Root Causes The errors suggest a reactive ref is receiving a non-array value where an array is expected. Possible sources: - A store initializes with a non-array default that gets replaced before first render - An API response is being assigned to the wrong store slot (object instead of array) - A Pinia store's reactive ref is being set to `undefined` or an object on first load before the API call completes ## Investigation Steps 1. Add defensive array checks in store computed properties 2. Check if any API response handler returns an object instead of an array on certain code paths 3. Verify Pinia store initialization order during SSR/hydration