Troubleshooting a code component issue

The most common cause is returning something other than a function inside a useEffect hook. For example:

useEffect(() => counterRef.current++, [someState])

This code returns a number to React due to the arrow function syntax, causing a crash. To fix it, wrap the function body in curly braces:

useEffect(() => { counterRef.current++ }, [someState])

Why is my code component not rendering?

If your code component crashes due to errors, Framer hides the insert to prevent rendering issues on the rest of the page. Once you fix the errors in your component, the insert should render as expected.

If your code component tries to access browser-specific APIs (e.g., window, document, or navigator) during server-side rendering, Framer will hide it and attempt to retry rendering when the page loads. To prevent this, ensure these APIs are accessed inside a useEffect() hook. If your component still isn’t showing up, check for errors or problematic code in your function.

How do I see if my code component has errors?

When a code component crashes, an error message appears in the console. Next to the error, you’ll see an identifier (e.g., code-crash:IilknqsQI:TlIGJvk3t). Paste this identifier into Quick Actions (CMD + K or CTRL + K) to locate the problem component.

For questions related to code overrides, feel free to ask them in our developers space or check out our official documentation here.