Troubleshooting

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

Ask AI about this page

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:

1234567891011// 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:

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

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.

"Could not clone my website"

Symptom: The export fails entirely or produces empty files.

Possible causes:

No components in the project. Unframer exports components, not raw layers. Select any layer, right-click, and choose Create Component first.
Plugin not opened. The React Export plugin must be opened and components must be selected before the CLI can download anything.
Site not published. Framer only generates the JavaScript URLs after you click Publish. Publish your site, then re-run the CLI.
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:

Make sure you import styles.css at the top of your app:
```
1import './framer/styles.css'
```
If components have fixed dimensions, override with style={{ width: '100%' }} or className="!w-full".
Make sure you're using React 19. Older versions can cause rendering issues.
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.