Next JS - SyntaxError when using 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!!

Renato Damázio · Accepted Answer · 2021-12-04 15:24:21Z

7

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

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

answered Dec 4, 2021 at 15:24

Renato Damázio

3092 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noitidart Over a year ago

This fixed it too, but is this really the solution? There must be a way for it to work with import syntax.

Noitidart Over a year ago

Seems like theres a topic on it here - github.com/vercel/next.js/issues/30750 - they do esmExternals: false but I don't think that's the solution either.

mr-chidex · Accepted Answer · 2022-08-17 00:24:34Z

0

I think the problem is from the latest update. This works for me yarn add [email protected]

answered Aug 17, 2022 at 0:24

mr-chidex

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Rajat Bhatt · Accepted Answer · 2022-08-26 13:06:54Z

0

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.

answered Aug 26, 2022 at 13:06

Rajat Bhatt

1,54515 silver badges18 bronze badges

Collectives™ on Stack Overflow

Next JS - SyntaxError when using framer-motion

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related