How to Fix "Unable to Resolve Package" Error in Framer

In this tutorial, you'll learn how to fix package and dependency issues in Framer.

Currently, Framer doesn't have a native way to manage dependencies. You can track the progress of this feature by following the feature request.

How do Packages Work in Framer?

Framer uses JSPM to manage NPM packages. JSPM is a service that converts NPM packages into ES Modules.

This conversion is important because browsers can't use NPM packages directly, but they can use ES Modules, which JSPM creates from the original packages.

By using JSPM, Framer allows you to import and use a wide range of NPM packages directly in your projects.

However, this conversion process can sometimes lead to version conflicts or compatibility issues, especially with more complex packages or those not fully compatible with browser environments.

Why aren't Packages Updated Automatically?

When you first import a package, Framer saves the version of that package and its dependencies. It doesn't automatically update these versions to prevent breaking changes in your project.

This approach makes it challenging to keep your custom code overrides and components up-to-date, particularly for older projects.

How to Import Packages with Specific Versions Manually

An alternative approach is to import packages directly from a CDN that allows specifying versions manually, such as esm.sh. This method gives you more control over package versions.

For example, instead of using the default import like this:

import confetti from "canvas-confetti"

You can import it with esm.sh and specify the version:

import confetti from "<https://esm.sh/canvas-confetti@1.6.0>"

⚠️ Warning: Packages with direct React dependencies may not function correctly when imported via CDN.

This method is a workaround and doesn't solve all issues. If problems persist, seek help in the Framer community support.

References:
https://www.framer.community/c/bugs/spline-npm-package-is-not-up-to-date-in-framer
https://www.framer.community/c/developers/optimization-warnings-with-markdown-custom-component
https://www.framer.community/c/developers/cannot-import-emotioncss-e-is-not-a-function
https://www.framer.community/c/support/can-t-import-chakra-and-mui-to-framer-app