After installing framer motion and applying some animations to my NextJS component, I get error,

[Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

import { motion } from "framer-motion";

const HeroSection: React.FC = () => {
  return (
    <div className="text-white py-10 overflow-hidden">
      <div className="container mx-auto px-6 flex flex-col lg:flex-row items-center">
        <motion.div
          className="w-full lg:w-3/5 mb-12 lg:mb-0"
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
        </motion.div>
      </div>
    </div>
  );
};

export default HeroSection;

After installing framer motion and applying some animations to my NextJS component, I get error,

[Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

import { motion } from "framer-motion";

const HeroSection: React.FC = () => {
  return (
    <div className="text-white py-10 overflow-hidden">
      <div className="container mx-auto px-6 flex flex-col lg:flex-row items-center">
        <motion.div
          className="w-full lg:w-3/5 mb-12 lg:mb-0"
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
        </motion.div>
      </div>
    </div>
  );
};

export default HeroSection;

• javascript
• reactjs
• next.js
• framer-motion

1 Answer 1

I figured out that framer could only work in a client-based component and since I was using NextJS, I had to add the "use client" directive at the top, which fixed the issue.

"use client"
import { motion } from "framer-motion";

const HeroSection: React.FC = () => {
  return (
    <div className="text-white py-10 overflow-hidden">
      <div className="container mx-auto px-6 flex flex-col lg:flex-row items-center">
        <motion.div
          className="w-full lg:w-3/5 mb-12 lg:mb-0"
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
        </motion.div>
      </div>
    </div>
  );
};

export default HeroSection;