reactjsnpmframerjs

Framer doesn't see an npm package that exists

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: enter image description here

The two libraries have npm packages:

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"
Solution

  • 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.).