How to fix “Cannot Set Properties of Undefined” Optimization Error

When we pre-render pages on our server, we must ensure that the pre-rendered version works correctly regardless of the visitor's browser. Since we don't have information about their browser settings, window size, etc., we pre-render without a browser. This means that APIs like window, document, navigator, etc. are unavailable, and if custom code relies on them for rendering, it will cause errors.

Potential solutions

The best solution to these errors is to write JavaScript that doesn't rely on browser APIs for rendering. For instance, instead of using window.innerWidth, use CSS media queries.

But what if you need to customize your components based on the user's logged-in status (document.cookie) or navigator.language? In this case, when pre-rendering the site, we don't have this information. Therefore, you need to write a component that displays a placeholder while the page is loading and updates its status after the page has loaded. Here’s an example: framer-optim-1.jsx

You could also completely “opt out” your component from optimization: framer-optim-2.jsx. Note that the content of the component will not be accessible to search engines. It will appear after the page has finished loading. It might be a good idea to create a placeholder instead. You can use the same trick in your overrides: framer-optim-3.jsx