Next.js“_framerMotion.motion.custom 不是函数”

Question

我在 Next.js 中遇到 Chakra UI 问题。我已经正常安装了所有软件包。我已经编辑了_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

但是当我尝试启动开发服务器时，它给了我这样的错误：

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)

请帮助我。非常感谢。

Answer 1

https://github.com/chakra-ui/chakra-ui/issues/3618说你应该降级framer-motion

-> 在 package.json 中：将 "framer-motion": "x.y.z" 更改为 "framer-motion": "3.10.6"

-> npm 安装

更新： 此问题已得到解决，请参阅 https://chakra-ui.com/guides/integrations/with-framer 了解更多信息。

Answer 2

如果其他人使用 Chakra-UI 由于文档过时而意外调用

motion.custom()

，请勿降级到 3.10.6。 找出 v4 的正确语法是什么。

motion.custom()

已被贬值，但开发人员添加了对 Framer Motion v4 的支持：https://chakra-ui.com/guides/integrations/with-framer

因此，解决方案更加优雅且易于实施。

来自 v4 更新的文档：

motion.custom()

、

的折旧

如果您使用的是最新版本的成帧器运动，即 >= v 3.10.0。在此版本中，framer-motion 会自动过滤掉转发到所提供组件的与运动相关的 props。

这意味着，在大多数情况下，任何声明

forwardRef

和

isValidMotionProp

需要将与运动相关的 prop 转发和过滤到组件 的内容实际上都会被贬值 。

例如，假设我们有以下组件，我们可以在屏幕上拖动：

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

在

v3 > 3.10.0

和

motion.custom()

中，你必须这样写才能实现它：

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} />
  }),
)

现在，在

v3 >= 3.10.0 (v4)

中，

motion()

用少得多的语法实现了相同的结果：

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

const MotionBox = motion(Box)

故事的寓意：在进行研究之前不要降级 - 从长远来看，你可能最终会给自己带来更多的工作！

Answer 3

如果您使用服务器组件，请在组件顶部添加 “使用客户端”。我希望它能修复这个错误。