Framer Motion v4 breaks Chakra

🐛 Bug report

💥 Steps to reproduce

1. Install a fresh instance of Chakra, including all of its required dependencies
2. Start the app
3. Notice it crash

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/chakra-framer-motion-v4-bug-4i6rq

📝 Additional information

Looking at the Framer Motion changelog, it appears to be related to the deprecation of motion.custom() in favor of motion(), which I believe is being tracked in #3459 .

[philipguedes]

Same here, just installed Chakra in a new Nextjs project and got the same error

TypeError: _framerMotion.motion.custom is not a function
    at Object.<anonymous> (/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox-icon.js:20:38)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

Downgraded framer-motion to v3.10.6 and it solved the problem for me

[with-heart]

The main thing I’ve been worried about in trying to resolve this situation for us is maintaining our commitment to semantic versioning. For a bit there, I was worrying that we had dug ourselves into a hole that we couldn’t get out of, because forcing users to 4.0.0 would need to be considered a breaking change since framer-motion is a peerDependency.

However, I think that worry was incorrect. Our peerDependency range already supports framer-motion@4.0.0 (because >=3.0.0), it’s just that our codebase doesn’t support it. Since we’re not removing ^3.0.0 from this range, it’s not a breaking change on our part, just a minor change that adds support for framer-motion@^4.0.0 to the codebase.

Here’s what the changes that will be part of this minor bump will consist of:

Conditional checks to support both v3 and v4 APIs

We can determine whether we’re in v3 or v4 based on the existence of motion.custom:

const v3 = 'custom' in motion
const v4 = !('custom' in motion)

We can use this to add conditionals throughout the codebase in order to support both version:

• Conditionally call motion or motion.custom based on whether motion.custom exists:

const MotionSvg =
  'custom' in motion ? (motion as any).custom(chakra.svg) : motion(chakra.svg)

• Bump devDependencies versions of framer-motion from ^3.1.1 to ^4.0.0. Without this, we can’t track changes to the v4 API and update our internals as necessary.

Future-proofing

• Reduce peerDependency range of framer-motion to 3.x || 4.x, so we can avoid this situation in the future with framer-motion@5 😬
• Update installation instructions to install framer-motion@^4 so that fresh Chakra installs use the current latest version. Since we’ll eventually drop 3.0 support to take full advantage of the new bundle size reduction stuff in 4.0, this will make it easier for new installs to upgrade when that inevitably happens.