Install and Setup Chakra UI in a React Project
In this lesson, you'll learn how to install Chakra UI in a blank Next.js project, create a custom App override. Additionally, you will learn how to use the Chakra Provider to set up Chakra UI.
Here are the Figma files that we'll use throughout the course.
Just started; believe I followed the instructions as given; wrapped the Component with ChakraProvider and get this error: file:///Users/jseidel/dev/nextjs/chakraui/node_modules/@chakra-ui/toast/dist/chunk-7WY3NOY6.mjs:9 import { motion, useIsPresent } from "framer-motion"; ^^^^^^ SyntaxError: Named export 'motion' not found. The requested module 'framer-motion' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:
import pkg from 'framer-motion'; const { motion, useIsPresent } = pkg;
I did use all the version settings that you provide; here's my package.json { "name": "chakraui", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@babel/core": ">=7.0.0 <8.0.0", "@chakra-ui/react": "^2.4.9", "@emotion/react": "^11", "@emotion/styled": "^11", "@next/font": "13.1.3", "@types/node": "18.11.18", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", "eslint": "8.32.0", "eslint-config-next": "13.1.3", "framer-motion": "4", "next": "13.1.3", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.4" } } Suggestions?
Ok... here is what's needed to make this work now... yarn add @chakra-ui/react@2.4.2 @emotion/react@^11.10.5 @emotion/styled@^11.10.5 framer-motion@^6.5.1 or npm install @chakra-ui/react@2.4.2 @emotion/react@^11.10.5 @emotion/styled@^11.10.5 framer-motion@^6.5.1
Or even without any version numbers -- Chakra-UI just published an update 3 weeks ago to fix the CommonJS module issues.