> Agent-readable docs index: /llms.txt. Download /docs.zip to grep all markdown files locally.

---
title: Troubleshooting
sidebarTitle: Troubleshooting
description: Solutions for common issues when exporting Framer components to React.
icon: lucide:bug
---

# Troubleshooting

Common issues and solutions when using Unframer to export Framer components as React code.

## React Strict Mode breaks animations

**Symptom:** Framer animations play twice, glitch, or don't work at all.

**Fix:** Disable React Strict Mode. Open your entry file (`main.tsx` or `index.tsx`) and remove the `<StrictMode>` wrapper:

```tsx
// Before
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App />
    </StrictMode>
)

// After
createRoot(document.getElementById('root')!).render(
    <App />
)
```

Strict Mode renders components twice in development. Framer's animation system is not designed for this and can break.

## React 19 ref warning

**Symptom:** Console warning `Accessing element.ref was removed in React 19`.

**Fix:** This is a **harmless warning**. Framer's internal code still uses the old `element.ref` API. It does not affect functionality. The warning will disappear when Framer updates their codebase to React 19 APIs.

## Hydration mismatch warnings

**Symptom:** Console warning about server-rendered HTML not matching client properties.

**Fix:** This sometimes happens with **SVG icons** in Framer components. It is harmless and only appears in development mode. It does not affect production builds.

## Export fails with esbuild error

**Symptom:** Error like `No matching export in "/:https://esm.sh/zustand" for import "default"`.

**Fix:** Use the `--external` flag to externalize the problematic npm package, then install it manually:

```bash
npx unframer {projectId} --outDir ./src/framer --external zustand
npm install zustand@3
```

<Aside>
  <Warning>
    Framer sometimes uses **older versions** of npm packages (e.g. Zustand 3.x). If you externalize a package, make sure you install the **same major version** Framer expects. Check Framer's code component imports to find the right version.
  </Warning>
</Aside>

## "Could not clone my website"

**Symptom:** The export fails entirely or produces empty files.

**Possible causes:**

1. **No components in the project.** Unframer exports components, not raw layers. Select any layer, right-click, and choose **Create Component** first.
2. **Plugin not opened.** The React Export plugin must be opened and components must be selected before the CLI can download anything.
3. **Site not published.** Framer only generates the JavaScript URLs after you click **Publish**. Publish your site, then re-run the CLI.
4. **Outdated CLI.** Run `npm install -g unframer@latest` to update.

## Components render but look wrong

**Symptom:** Components render but have wrong sizes, missing styles, or broken layout.

**Fix checklist:**

1. Make sure you import `styles.css` at the top of your app:
   ```tsx
   import './framer/styles.css'
   ```
2. If components have fixed dimensions, override with `style={{ width: '100%' }}` or `className="!w-full"`.
3. Make sure you're using **React 19**. Older versions can cause rendering issues.
4. Try re-exporting: publish in Framer, then run `npx unframer {projectId}` again.

## `--watch` mode not detecting changes

**Symptom:** The `--watch` flag doesn't trigger a re-export after changes.

**Fix:** The watch mode works by polling the Framer website URL and checking the `etag` header. It only detects changes to **published** components. You must click the **Publish** button in Framer for changes to be picked up.

Also, the watch mode may not detect changes if your modified component is not used on the **main page** of your Framer site.

## Fonts not loading

**Symptom:** Components render with fallback system fonts.

**Fix:** Make sure `styles.css` is imported in your app. The styles file contains `@font-face` declarations for all fonts used in your Framer components. If fonts still don't load, check your bundler's CSS handling configuration.

## Known limitations

* **Framer CMS data** is not exported. Components that rely on CMS collections will render without dynamic content.
* **Framer interactions** (hover effects, click animations) are exported and work. But complex **page transitions** between Framer pages are not preserved.
* **Code components** that use browser-only APIs may need adjustments for SSR environments.