This document aims to help Korean users of Framer who face difficulties due to the lack of Korean resources by translating content from the official blog into Korean and adding useful information for practical use. We hope this will be of some help to Framer users.

What is a Publish Error?

A publish error occurs when there is an issue with a component or page, causing the deployment to halt.
When a publish error happens, a toast notification saying “Failed to publish because there is an error on a page.” appears.
At this time, a Review button is displayed, allowing you to identify which component is causing the problem.

Common Causes

1. Component Build Timeout

   When Framer creates a page, it loads and assembles components one by one. If any component is too slow or becomes unresponsive, the publish will fail once time runs out.
   For example, you might see a message like ensureComponentsInLoader: Component loader not updated in time in the web inspector (developer tools).

   Resolution

   Try publishing again. If it keeps failing, you need to modify or remove the problematic component.

   
   

2. Missing Component Error

   If you’re using a component created earlier but it’s been deleted, renamed, or failed to load properly, issues may arise. In Framer, such components appear as gray boxes in the layer panel.
   By pressing the Review button, you can swiftly identify the problem spot.

   Resolution

   Reload or create a new component to replace those indicated as gray boxes.

What is an Optimization Error?

Framer optimizes by pre-rendering pages from the server to display sites faster. However, since this server is not a browser, it cannot recognize certain user information as shown below.

• Cookies

• Window size

• Language

• Browser objects like window, document, navigator

If a custom code component or Override you created tries to access this information, the server will not be able to execute that code and will display 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 this Important?

• Even at a warning level, some pages might appear empty or have content show up slowly.

• If errors occur, the affected page may suffer in quality metrics like SEO and Core Web Vitals.

Code Components to Watch Out For

The most common cause of optimization errors is code components that use browser-only APIs like window, document, navigator. These values do not exist in a non-browser server environment.

In such cases, consider using conditional rendering or

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

refactoring your code in line with Framer's guide to optimize properly.
Note: For detailed guidance, refer to 'How to fix custom code optimization errors'.

This article is translated and adapted from Framer's official blog post ‘How to debug a publish or optimization warning’.