framer-common-errors

# Framer Common Errors ## Overview Diagnostic reference for common Framer plugin, component, and Server API errors with actionable fixes. ## Error Reference ### Plugin Not Appearing in Editor **Cause:** Dev server not running or plugin not registered. **Fix:** ```bash npm run dev # Start Vite dev server # Then in Framer: Plugins > Development > select your plugin ``` --- ### `framer is not defined` **Cause:** Calling `framer` API outside the Framer editor iframe context. **Fix:** The `framer` global from `framer-plugin` only works inside the editor. For server-side access, use `framer-api` package instead. ```typescript // Plugin (editor): import { framer } from 'framer-plugin'; // Server (headless): import { framer } from 'framer-api'; ``` --- ### Component Renders Blank on Canvas **Cause:** Runtime error in component code (swallowed by Framer). **Fix:** Open Framer's browser console (right-click > Inspect) and check for errors. Common causes: - Missing `export default` on component - Undefined props without defaults - Fetch errors from blocked CORS requests --- ### `addPropertyControls` Not Showing **Cause:** Called on wrong component or wrong import. **Fix:** ```tsx // Must import from 'framer', not 'framer-plugin' import { addPropertyControls, ControlType } from 'framer'; // Must be called AFTER the component definition export default function MyComponent(props) { /* ... */ } addPropertyControls(MyComponent, { /* ... */ }); ``` --- ### Code Override...