Can't use framer-motion with Preact in Fresh

[sudo-sand]

When trying to use framer-motion in fresh, I used esm's alias trick

"framer-motion": "https://esm.sh/framer-motion@7.0.0?alias=react:preact/compat"

I get this error:

TypeError: Cannot read properties of undefined (reading 'context')
    at I (https://esm.sh/v90/preact@10.10.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/hooks.js:2:1415)
    at Ws (https://esm.sh/v90/framer-motion@7.0.0/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/framer-motion.js:2:8496)
    at i (https://esm.sh/v90/framer-motion@7.0.0/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/framer-motion.js:2:8015)
    at Object.t (https://esm.sh/v90/preact@10.10.1/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0/deno/compat.js:2:1609)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:4:1003)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:4:1103)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:4:1103)
    at h (https://esm.sh/v89/preact-render-to-string@5.2.1/X-ZS9wcmVhY3Q/deno/preact-render-to-string.js:9:66)

Anyone got an Idea on how to fix this?

[excessivecoding]

I don't know about Framer now, but I know there has been no support for Preact in the past. Might be still the case ?

motiondivision/motion#1369

[sudo-sand]

Maybe, I didn't try any complex stuff, but motion works in a vite-preact app. I'm just fishing for a way to make it work in Fresh.

[mooxl]

@sudo-sand did you found a way?

[sudo-sand]

nope

[marleypowell]

{
    "framer-motion": "https://esm.sh/v135/framer-motion@^11.11.13?external=react,react-dom&target=es2022",
    "react": "https://esm.sh/preact@10.23.1/compat",
    "react-dom": "https://esm.sh/preact@10.23.1/compat",
    "react/": "https://esm.sh/preact@10.23.1/compat/",
}

[ieiekk]

Just found out this in the blog post :

Out of the box react aliasing
Aliasing react, react-dom and other packages to preact/compat has always been a bit tricky. This mapping often needed to be manually specified, and required app code to use esm.sh instead of pulling dependencies directly from npm. Having to be conscious about this was never an ideal setup.

With our Vite plugin, this will be taken care of for you. Install third party npm packages as usual and never run into aliasing issues again!

So I run a little test for motion/react, and it works out of the box!
No alias needed, just add the package via deno add npm:motion/react.

islands/MotionDiv.tsx :

<motion.button
      type="button"
      class={`bg-amber-400 p-4 rounded cursor-pointer`}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      onHoverStart={() => console.log("hover started!")}
    >
      Triggerd by motion/react
    </motion.button>

Package version :

"fresh": "jsr:@fresh/core@^2.3.3",
"motion": "npm:motion@^13.2.0",