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.
Lazar Nikolov: [0:01] In this lesson, we're going to install Chakra UI into a new Next.js project. With me, I have a blank Next.js project with TypeScript. I've removed all of the files and folders except for the index.tsx file. Let's make sure that everything works by running yarn dev.
[0:17] OK. The app works. Let's install the Chakra UI packages. We're going to do yarn add. Then, add chakra-ui/react, emotion/react, emotion/styled, and framer-motion. These are dependencies to Chakra UI. We need to install them in order everything to work fine.
[0:45] Now, to set up Chakra UI, we need to create a new file called _app.tsx into the pages directory. In there, we're going to import the AppProps from 'next/app'.
[0:58] We're going to create our App and do export default App.
[1:05] We're going to get the AppProps, which will be the Component and the pageProps, and return that Component with the pageProps spread to it. If we run this, there will be no changes.
[1:22] Nice. Now, let's add the ChakraProvider. We're going to import the ChakraProvider from chakra-ui/react. Then, we're going to wrap the Component with the ChakraProvider.
[1:41] If we run this now, we can see that the font changes. There we go. Now, Chakra UI is successfully installed. Let's recap. First, we installed the Chakra UI packages. Then we override the default Next.js app. Then, we wrap the Component with the ChakraProvider.
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.
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?