Next.js «_framerMotion.motion.custom не является функцией»

Question

У меня проблема с интерфейсом Chakra UI в Next.js. Я установил все пакеты нормально. И я редактировал _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": "xyz" на "framer-motion": "3.10.6"

-> установка npm

Answer 2

Если кто-то другой, использующий Chakra-UI, случайно вызывает из-за устаревшей документации, не переходите на 3.10.6. Узнайте, каков правильный синтаксис для v4.

был обесценен , но разработчики добавили поддержку Framer Motion v4: https://chakra-ui.com/guides/integrations/with-framer

В результате решения становятся немного более элегантными и простыми в реализации.

Из документации, обновленной до версии 4, относительно амортизации,

Если вы используете последнюю версию framer motion, то есть>= v3.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 с участием 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)

Мораль истории: не понижайте рейтинг, пока не проведете исследование - в конечном итоге вы можете дать себе гораздо больше работы!