javascript - Framer [Error: Element type is invalid: expected a string (for built-in components) or a classfunction (for composi

admin管理员组

文章数量:1406951

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

Share Improve this question Follow asked Mar 4 at 10:08 oyerohabiboyerohabib 39566 silver badges2020 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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;

本文标签：