[BUG] framer-motion/dom v11.3.0+ requires React in non-React projects, despite optional peer dependency

[MickaelOth]

1. Read the FAQs 👇 ✅

2. Describe the bug

Since version 11.3.0, framer-motion/dom, for non-React projects (Vue.js in my case), appears to require react to be installed, which was not the case for version 11.2.14 and below.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

framer-motion@11.2.14 (working) - https://codesandbox.io/p/devbox/framer-motion-11-2-14-mm8hj3?file=/src/App.vue framer-motion@11.3.2 (not working) - https://codesandbox.io/p/devbox/framer-motion-11-3-2-wqgsk7?file=/src/App.vue

4. Steps to reproduce

1. Import and use framer-motion/dom on a project without react installed.
2. With framer-motion@11.2.14 or earlier, the project works without issues (open the first CodeSandbox).
3. Upgrade to framer-motion@11.3.0 or later (open the second CodeSandbox).
4. Run the project and open the browser console (F12).
5. Observe the error: Error: Could not resolve "react" imported by "framer-motion". Is it installed?.

5. Expected behavior

framer-motion@11.3.2 should be importable without react since react is listed as an optional peer dependency.

[mattgperry]

Thanks for the report! A fix for this is going out in 11.3.5

[mattgperry]

That's out now, your sandboxes are private so I can't verify but let me know if that fixes it for you

[MickaelOth]

That's out now, your sandboxes are private so I can't verify but let me know if that fixes it for you

Sorry, the sandboxes should be public now.

I'm still facing the issue with the latest version (11.3.5)

[mattgperry]

Strange that it rolls this into the bundled framer-motion package, acknowledging it's an optional package, but there aren't any references to React in there otherwise.

// optional-peer-dep:__vite-optional-peer-dep:react:framer-motion
throw new Error(`Could not resolve "react" imported by "framer-motion". Is it installed?`);

[MickaelOth]

Indeed, it's strange. I looked at it a bit, I may have something.

The culprit could be the add-will-change file:

1. dom-entry imports animate
2. animate imports animateTarget
3. animateTarget use addValueToWillChange function, from add-will-change added in v11.3.0
4. add-will-change imports WillChangeMotionValue
5. WillChangeMotionValue imports useConstant
6. useConstant finally imports useRef from react

[mattgperry]

Ah great find, thanks. That's gotta be it. I'm just doing a publish and will take a look at this after.

[mattgperry]

I've published as 11.3.11, let me know if that doesn't fix that for you.