Framer doesn't see an npm package that exists

Question

I'm creating a framer code component and I want to import a library with the following code:

import { registerCoreBlocks } from "@quillforms/react-renderer-utils"
import { FormObj } from "@quillforms/renderer-core/build-types/types"

I am getting this error:

The two libraries have npm packages:

• @quillforms/react-renderer-utils

• @quillforms/renderer-core

The project worked fine locally (by locally I mean a Vite project). How can I resolve this issue? What may cause it?

My local package.json dependencies are:

"@quillforms/react-renderer-utils": "^5.10.0",
"@quillforms/renderer-core": "^5.8.0",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.2",
"sort-by": "^1.2.0"

Answer 1

The solution I came up with is the following:

I created the component using all the libraries I wanted and uploaded it to firebase hosting.

In framer I created a component, that consumes custom properties and passes though the values to an iframe like this:

 <iframe
        style={{ border: "none", height: "100%", width: "100%" }}
        src={`https://my-component.web.app/${encodeURI(
             JSON.stringify({
             props,
             locale: localStorage.getItem("preferredLocale") || "en",
             })
           )}`}
        name="form"
        title="Form">
 </iframe>

On the Firebase components end I did:

const { urlProps } = useParams();
const props = JSON.parse(urlProps || "{}")

To get the properties I needed. Whit this, I have the full flexibility of vanilla React projects, while I still have insanely fast load times in addition to being able to customize the framer component in framer (on the propperties panel, like colors, font sizes, ect.).

Answer 2

Per Framer's community posts and docs - their online IDE is still an experimental feature and may not support all packages.

Framer does support importing ES Module-based code, but the package itself needs to be compatible with the browser and should ideally be designed for use with Framer. You can check if a package is compatible on the Framer npm page: https://www.framer.com/npm/

Importing npm packages is currently an experimental feature. Most packages typically don’t work unless unless they were built specifically for Framer.

From 1 and 2

It might be a good idea to continue using your local setup for development.

Answer 3

See here.

The framer docs explicitly state that

Importing npm packages is currently an experimental feature. Most packages typically don’t work unless unless they were built specifically for Framer. Some projects with multiple npm imports may run into errors with adding multiple npm dependencies, as sub-dependency conflicts can occur.

Try importing your code into a local environment.