Fixing "Uncaught TypeError: Cannot read properties of undefined" in Shopify cart.js & theme.js

Few bugs are more damaging to a Shopify store than an Uncaught TypeError occurring during cart interactions. Because JavaScript is single-threaded in the browser, an unhandled exception inside an event listener does not just log an error—it terminates script execution immediately, preventing form submissions, animation states, and checkout redirects.

Direct Answer: What Triggers This Error & How to Fix It

The error Uncaught TypeError: Cannot read properties of undefined (reading 'items') occurs when a theme script or third-party app expects a standard Shopify /cart.js JSON response containing an items array, but receives an error object, an HTML string, or an empty response (such as an HTTP 429 Too Many Requests or 422 Unprocessable Entity payload). Wrapping cart state mutations in defensive guards with optional chaining (data?.items ?? []) and validating network response headers prevents the entire UI thread from crashing.

Step-by-Step Call Stack Diagnostic with DevTools

When reproducing the error in Chrome DevTools:

1. Open DevTools (F12 or Cmd+Option+I) and navigate to the Console panel.
2. Click the Gear icon and ensure "Pause on exceptions" is enabled, specifically checking "Pause on caught exceptions" if the theme silently catches and suppresses errors.
3. Click the cart button or add an item to the cart.
4. Inspect the call stack frame where the execution halted. If the file is minified (e.g., theme.min.js), click the {} Pretty Print button at the bottom left.

async function fetchCartStateSafe() {
  try {
    const response = await fetch('/cart.js', {
      headers: { 'Accept': 'application/json' }
    });

    if (!response.ok) {
      // Catches HTTP 429, 500, or 404 without crashing JavaScript
      console.warn(`[Checkout Detective Alert] /cart.js returned status ${response.status}`);
      return null;
    }

    const cart = await response.json();
    // Use optional chaining and default fallbacks
    const items = cart?.items ?? [];
    const itemCount = cart?.item_count ?? 0;
    
    return { ...cart, items, itemCount };
  } catch (error) {
    console.error('[Checkout Detective] Critical Cart Sync Failure:', error);
    // Fallback: reload cart section or gracefully redirect to full /cart page
    window.location.href = '/cart';
    return null;
  }
}

Automate Script Health Auditing

Rather than waiting for customers to report that their cart drawer is broken, install the Checkout Detective Chrome Extension. Its Click-to-JS Correlation engine monitors every cart and checkout click event, capturing unhandled exceptions and identifying the offending third-party script name in seconds.