Next.js "_framerMotion.motion.custom is not a function"

Question

I have a problem with Chakra UI in Next.js. I have installed all packages normally. And I have edited the _app.tsx.

import { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

But when I trying to start the development server, it gives me an error like this:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
error - TypeError: _framerMotion.motion.custom is not a function
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/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)
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox.js:14:21)
    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)
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/index.js:13:17)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
TypeError: _framerMotion.motion.custom is not a function
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/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)
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox.js:14:21)
    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)
    at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/index.js:13:17)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)

Please help me. Thank you so much.

Answer 1

https://github.com/chakra-ui/chakra-ui/issues/3618 says you should downgrade framer-motion

-> in package.json: change "framer-motion": "x.y.z" to "framer-motion": "3.10.6"

-> npm install

UPDATE: This issue has been resolved since, see https://chakra-ui.com/guides/integrations/with-framer for more info.

Answer 2

If someone else using Chakra-UI accidentally invokes motion.custom() due to outdated documentation, do not downgrade to 3.10.6. Find out what the proper syntax for v4 is instead.

motion.custom() has been depreciated, but the developers have added support for Framer Motion v4: https://chakra-ui.com/guides/integrations/with-framer

Solutions are quite a bit more elegant and simple to implement as a result.

From v4-updated documentation re: depreciation of motion.custom(),

If you're using the latest version of framer motion, which is >= v 3.10.0. In this version, framer-motion automatically filters out motion-related props forwarded to the provided component.

That means, in most cases, anything stating that forwardRef and isValidMotionProp are required to forward and filter motion-related props to a component is what is actually depreciated.

For instance, say we have the following component we to be able to drag around the screen:

const DraggyBox = () => {
  return (
    <MotionBox
      boxSize="40px"
      bg="green.600"
      drag
      dragPropagation
      dragMomentum={false}
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 0.8 }}
    />
  )
}

In v3 > 3.10.0 with motion.custom(), you'd have to write this to be able to achieve it:

import { Box, forwardRef } from "@chakra-ui/react"
import { motion, isValidMotionProp } from "framer-motion"

const MotionBox = motion.custom(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      Object.entries(props).filter(([key]) => !isValidMotionProp(key)),
    )
    return <Box ref={ref} {...chakraProps} />
  }),
)

While now, in v3 >= 3.10.0 (v4), motion() achieves the same result with far less syntax:

import { Box } from "@chakra-ui/react"
import { motion } from "framer-motion"

const MotionBox = motion(Box)

Moral of story: Don't go downgrading before doing your research - you might end up giving yourself a lot more work in the long run!