Как исправить "ошибку парсинга" при добавлении элемента <motion.div /> в движение React / Framer

Question

Я запустил новое приложение для реагирования [create-react-app] и установил framer-motion. Приложение работает должным образом, пока не будет добавлен элемент движения кадра:

export const HomePageTemplate = ({ home }) => {
  return (
    <Fragment>
      <h2>Hello</h2>
      <motion.div animate={{ x: 50 }}>
        <h1>Hello Motion</h1>
      </motion.div>
    </div>

      <section className="home  section">
...

Соответствующие ошибки:

Uncaught TypeError: Cannot read property 'expirationTime' of undefined

C:/[my path]/node_modules/react-error-overlay/lib/index.js:2172 Warning: The <_default /> component appears to be a function component that returns a class instance. Change _default to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. `_default.prototype = React.Component.prototype`. Don't use an arrow function since it cannot be called with `new` by React.

C:/[my path]/node_modules/react-error->overlay/lib/index.js:2172 The above error occurred in the <Component> >component: 
in Component (created by ForwardRef(MotionComponent))
    in ForwardRef(MotionComponent) (at pages/index.js:18)
    in div (at pages/index.js:16)

Answer 1

Это точный код из вашего приложения? Кажется, тебе не хватает открытия<motion часть для создания элемента движения кадра:

<h1>Hello Motion</h1>
<motion.div animate={{ x: 100 }} />

См. Рабочий пример в этой песочнице кода: https://codesandbox.io/s/framer-motion-stackru-wbmbe.

Вы в целом знакомы с React? В руководстве в документации React рассказывается, как создавать элементы.