title: Next JS - SyntaxError when using framer-motion
body: <p>I'm using NextJS version 12.0.3 with framer motion for animations. Putting the functionality of the framer-motion library aside, when I tag any html element in my component, I get an error</p>
  <pre><code>error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
  For example:
  import pkg from 'react';
  const { createContext } = pkg;
  </code></pre>
  <p>The file (Login.jsx) causing the error:</p>
  <pre><code>import { motion } from &quot;framer-motion&quot;;
  
  const Login: React.FC = () =&gt; {
    return (
      &lt;motion.div
        className=&quot;&quot;
      &gt;
      &lt;/motion.div&gt;
    );
  };
  
  export default Login;
  </code></pre>
  <p>Oddly enough, when I am routed TO the logo page from a different page, the page loads fine. But when I REFRESH the page, I'm faced with this error.
  When I keep the import statement for framer-motion, BUT remove the motion. tags on my div element, the error does not persist when I refresh.</p>
  <p>Is this a common issue with Next JS 12.0.3?
  Should I just roll back to previous versions?</p>
  <p>Thanks for your time!!</p>