My experience with NextJS has been smooth sailing until now. I recently added the "framer-motion" module to animate some components, and it caused a major issue. Whenever I navigate to a page containing the import statement:
import { motion } from "framer-motion"
Instead of rendering the page, NextJS throws an error that displays the following code snippet:
And here is the error message I receive in the terminal:
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^
SyntaxError: Unexpected token 'export'
If I remove the import statement, the page renders correctly.
Interestingly, if I don't include the import statement before initially rendering the page but add it afterward, NextJS hot-reloads the page without any issues, allowing me to animate my components successfully. This led me to think that there might be something I need to configure with Webpack or Babel?
Being unfamiliar with both Babel and Webpack, I'm reaching out for help. Any guidance would be greatly appreciated! Thank you!