How to fix “Cannot Set Properties of Undefined” optimization error

Optimization issues often occur when custom code components or overrides depend on browser-specific APIs. This guide explains why these errors arise and how to resolve them.

Why optimization issues occur

Framer pre-renders pages on the server to improve performance and ensure compatibility across all devices. However, during pre-rendering:

  • Browser-specific APIs like window, document, and navigator are not available because the server lacks browser context (e.g., browser settings, window size, cookies).

  • Custom code that relies on these APIs will cause errors during pre-rendering.

Avoid browser-specific APIs

Write JavaScript that doesn’t rely on browser APIs for rendering.

  • Instead of: Using window.innerWidth.

  • Use: CSS media queries to handle layout changes based on screen size.

Use placeholders for browser-dependent data

If your component needs information like document.cookie (e.g., user login status) or navigator.language:

  1. Write a component that shows a placeholder during pre-rendering.

  2. After the page loads, update the component with the correct data.

Example: framer-optim-1.jsx

Opt out of optimization

If necessary, you can opt your component out of optimization entirely:

  1. Skip pre-rendering for the component using server-side logic.

  2. Note:

    • The component’s content won’t be accessible to search engines.

    • It will only load after the page has fully loaded.

    • Use a placeholder to provide a fallback experience for better usability.

Example: framer-optim-2.jsx

Apply the same approach to overrides

For custom overrides:

  • Use placeholders or opt out of optimization in a similar way to components.

Example: framer-optim-3.jsx

Still experiencing the issue after following the steps above? Create a support ticket in the Community or check out the Developer Space.