Next JS - 使用 framer-motion 时出现语法错误

Question

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

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;

The file (Login.jsx) causing the error:

import { motion } from "framer-motion";

const Login: React.FC = () => {
  return (
    <motion.div
      className=""
    >
    </motion.div>
  );
};

export default Login;

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.

Is this a common issue with Next JS 12.0.3? Should I just roll back to previous versions?

Thanks for your time!!

Answer 1

I had the same errors by importing framer-motion. I solved this problem change import by require:

const { motion } = require("framer-motion");

Answer 2

I think the problem is from the latest update. This works for me yarn add framer-motion@6.5.1

Answer 3

I was also facing the same issue and looking at the upgrade guide of next js I found that the I was using nodejs version < 12.22.0 which caused this issue. Upgrading it to nodejs 12.22.0 fixed the issue for me.