title: How to fix "Parsing Error" when adding the <motion.div /> element in React / Framer motion
body: <p>I started a new react app [create-react-app] and installed framer-motion. The app runs as expected until adding a framer motion element:</p>
  
  <pre class="lang-js prettyprint-override"><code>export const HomePageTemplate = ({ home }) =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;h2&gt;Hello&lt;/h2&gt;
        &lt;motion.div animate={{ x: 50 }}&gt;
          &lt;h1&gt;Hello Motion&lt;/h1&gt;
        &lt;/motion.div&gt;
      &lt;/div&gt;
  
        &lt;section className="home  section"&gt;
  ...
  
  </code></pre>
  
  <p>Relevant errors:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'expirationTime' of undefined
  </code></pre>
  
  <pre><code>C:/[my path]/node_modules/react-error-overlay/lib/index.js:2172 Warning: The &lt;_default /&gt; 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.
  </code></pre>
  
  <pre><code>C:/[my path]/node_modules/react-error-&gt;overlay/lib/index.js:2172 The above error occurred in the &lt;Component&gt; &gt;component: 
  in Component (created by ForwardRef(MotionComponent))
      in ForwardRef(MotionComponent) (at pages/index.js:18)
      in div (at pages/index.js:16)
  </code></pre>