ChakraUI v3 + Vite + Reactの環境構築

はじめに

ChakraUI v3のドキュメントが若干分かりづらいので環境構築をまとめます

環境構築方法

基本的にはドキュメント通りに勧めていきます。

$ npm create vite
✔ Project name: … sample-chakra
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /home/jinwatanabe/workspace/tmp/sample-chakra...

Done. Now run:

  cd sample-chakra
  npm install
  npm run dev

$ cd sample-chakra
$ npm i
$ npm i @chakra-ui/react @emotion/react
$ npx @chakra-ui/cli snippet add
$ npm i -D vite-tsconfig-paths

次にtsconfig.app.jsonを直します

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Viteプロジェクトで使えるようにvite.config.tsを直します

vite.config.ts

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

main.tsxでProviderを使って実際にAPPの中でChakraUIを使えるようにします

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from './components/ui/provider'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

実際にChakraUIが表示されるかApp.tsxを修正します

src/App.tsx

import { Button, HStack } from '@chakra-ui/react'

function App() {

  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

export default App

サーバー起動して表示されれば成功です

$ npm run dev

localhost:5174にアクセスする

おわりに

何度も調べるときは記事にしましょう