I have a problem with Chakra UI in Next.js. I have installed all packages normally. And I have edited the _app.tsx.
import { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import '../styles/globals.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
But when I trying to start the development server, it gives me an error like this:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
error - TypeError: _framerMotion.motion.custom is not a function
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox-icon.js:20:38)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox.js:14:21)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/index.js:13:17)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
TypeError: _framerMotion.motion.custom is not a function
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox-icon.js:20:38)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/checkbox.js:14:21)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/mnt/d/Projects/nextjs-chakraui/node_modules/@chakra-ui/checkbox/dist/cjs/index.js:13:17)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
Please help me. Thank you so much.