I attempted to incorporate Framer Motion into my project, but when I added it, an error occurred. The error message displayed was: TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. For more information, visit: https://nextjs.org/docs/messages/context-in-server-component. To resolve this, I added the "use client" directive at the beginning of the file, however, a new error appeared stating: Error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ().
The code snippet that caused this issue is below:
'use client';
import Image from 'next/image'
import { Teko, Syncopate , Sofia_Sans_Condensed, Anton} from 'next/font/google'
import { FaTelegramPlane} from 'react-icons/fa'
import { FaDiscord} from 'react-icons/fa'
import { BsShop} from 'react-icons/bs'
import Link from 'next/link'
import {motion as m} from "framer-motion"
export default function Home() {
return (
<m.main className='container'>
<h1>Hello World</h1>
</m.main>
)
To address the error, I included the "use client" directive at the top as suggested, but encountered a new issue with the message: Error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ().