Next.js에서 Framer motion Error 오류 해결 방법: 'use client'로 간단히 해결!

Framer motion Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

 

이 오류는 Next.js 14 버전에서 발생할 수 있으며, 간단한 해결 방법이 있습니다.

 

오류 원인

Next.js 14 버전에서는 클라이언트 컴포넌트를 명시적으로 선언해야 합니다.

문제를 해결하기 위해서는 Framer Motion을 사용하는 파일의 최상단에 'use client'를 추가하면 됩니다.

 

예시 코드)

"use client";
import React from "react";
import { motion } from "framer-motion";
// Your component code
const MyComponent = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
    Hello, Framer Motion!
  </motion.div>
);
export default MyComponent;

 

요약

• 오류: Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

• 원인: React의 createContext 함수가 호출되지 않음

• 해결 방법: Framer Motion을 사용하는 파일에 "use client" 추가