This document aims to alleviate the difficulties experienced by domestic users learning Framer due to the lack of Korean materials, by translating official blog content into Korean and adding practical information. We hope it provides some help to those of you using Framer.

What is a publish error?

A publish error occurs when there is an issue with a component or page during site deployment, causing the deployment to halt.
When a publish error occurs, a toast notification will display “Failed to publish because there is an error on a page.”
The Review button also appears, allowing you to check which component is problematic.

Common Causes

1. Component Build Timeout

   Framer loads each component individually when creating a page and assembles them. If any component runs too slowly or stalls during loading and assembly, resulting in time running out, the publish will fail.
   For example, you might see messages like ensureComponentsInLoader: Component loader not updated in time in the web inspector (developer tools).

   Solution

   Try publishing again. If it continues to fail, find the problematic component and modify or remove it entirely.

   
   

2. The component I was using is gone (Missing Error)

   If you are using an old component and it has been deleted or renamed or the file is not loading correctly, an issue will arise. In Framer, such components are shown as grey boxes in the layer panel.
   By pressing the Review button, you can immediately identify which part is problematic.

   Solution

   You need to reload or recreate and replace the component displayed as a grey box.

What is an Optimization Error?

In Framer, optimization involves pre-rendering pages on the server to display the site faster. However, since this server is not a browser, it cannot know the following user information.

• Cookies

• Window size

• Language

• Or browser objects like window, document, navigator

If your custom code component or Override tries to access such information, the server cannot execute that code, resulting in an Optimization Warning.

Optimization Status

1. Optimized

2. Optimization Warning

3. Optimization Error

Note: You can check the optimization status in Settings → Domains or Settings → Versions.

Why is it important?

• Even at a warning level, some pages may appear with content showing up late or seeming empty.

• If an error occurs, that page may suffer in terms of SEO, Core Web Vitals, and other quality metrics.

Code components to watch out for

The most common cause of optimization errors is code components using browser-exclusive APIs like window, document, navigator. These values do not exist on the server since it's not a browser environment.

In such cases, use conditional rendering or

```js
if (typeof window !== "undefined") {
  // window가 있을 때만 실행되도록 처리
}
```

refactor your code according to Framer guides to align with optimization.
Note: For detailed guidance, refer to 'How to fix custom code optimization errors'.

This content is a translated and adapted version of Framer's official blog post 'How to debug a publish or optimization warning'.