Reactjs Next.js"_framerMotion.motion.custom不是一个函数；

我对Next.js中的脉轮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

从“下一个/app”导入{AppProps}
从“@chakra ui/react”导入{ChakraProvider}
导入“../styles/globals.css”
函数MyApp（{Component，pageProps}:AppProps）{
返回(
)
}
导出默认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)

ready-已在0.0.0.0:3000上启动服务器，url:http://localhost:3000
事件-已成功编译
事件-生成页面：/
等待-编译。。。
事件-已成功编译
事件-生成页面：/next/dist/pages/\u错误
等待-编译。。。
事件-已成功编译
错误-类型错误：\ u framerMotion.motion.custom不是函数
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/checkbox icon.js:20:38）
at模块编译（内部/modules/cjs/loader.js:1063:30）
在Object.Module._extensions..js（internal/modules/cjs/loader.js:1092:10）
在Module.load（内部/modules/cjs/loader.js:928:32）
at Function.Module._load（内部/modules/cjs/loader.js:769:14）
at Module.require（内部/modules/cjs/loader.js:952:19）
根据需要（内部/modules/cjs/helpers.js:88:18）
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/checkbox.js:14:21）
at模块编译（内部/modules/cjs/loader.js:1063:30）
在Object.Module._extensions..js（internal/modules/cjs/loader.js:1092:10）
在Module.load（内部/modules/cjs/loader.js:928:32）
at Function.Module._load（内部/modules/cjs/loader.js:769:14）
at Module.require（内部/modules/cjs/loader.js:952:19）
根据需要（内部/modules/cjs/helpers.js:88:18）
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/index.js:13:17）
at模块编译（内部/modules/cjs/loader.js:1063:30）
TypeError:_framerMotion.motion.custom不是函数
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/checkbox icon.js:20:38）
at模块编译（内部/modules/cjs/loader.js:1063:30）
在Object.Module._extensions..js（internal/modules/cjs/loader.js:1092:10）
在Module.load（内部/modules/cjs/loader.js:928:32）
at Function.Module._load（内部/modules/cjs/loader.js:769:14）
at Module.require（内部/modules/cjs/loader.js:952:19）
根据需要（内部/modules/cjs/helpers.js:88:18）
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/checkbox.js:14:21）
at模块编译（内部/modules/cjs/loader.js:1063:30）
在Object.Module._extensions..js（internal/modules/cjs/loader.js:1092:10）
在Module.load（内部/modules/cjs/loader.js:928:32）
at Function.Module._load（内部/modules/cjs/loader.js:769:14）
at Module.require（内部/modules/cjs/loader.js:952:19）
根据需要（内部/modules/cjs/helpers.js:88:18）
反对。（/mnt/d/Projects/nextjs chakraui/node_modules/@chakra ui/checkbox/dist/cjs/index.js:13:17）
at模块编译（内部/modules/cjs/loader.js:1063:30）

请帮帮我。非常感谢。

说你应该降低成帧器的运动

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

->npm安装

---

更新：此问题已解决，请参阅以获取更多信息。

如果其他使用Chakra UI的用户由于过时的文档而意外调用了

motion.custom（）

，请不要降级到3.10.6。找出v4的正确语法

motion.custom（）

已经贬值，但开发人员增加了对Framer motion v4的支持：

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

从v4更新的文档中，关于

motion.custom（）的折旧

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

这意味着，在大多数情况下，任何声明需要
forwardRef
和
isValidMotionProp
将与运动相关的道具转发和过滤到组件的内容都是实际折旧的内容

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

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（v4）
中，
motion（）
以更少的语法实现了相同的结果：

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

const MotionBox = motion(Box)

这个故事的寓意是：在做研究之前不要降级——从长远来看，你可能会给自己更多的工作
 答案是误导性的，大概需要反思一下update@AveryFreeman据我所知，这个问题已经解决了。我已经更新了我的答案，谢谢你指出这一点。
import { Box } from "@chakra-ui/react"
import { motion } from "framer-motion"

const MotionBox = motion(Box)