Chakra UI v3の環境設定(React × TypeScript × Chakra UI)

はじめに

じゃけぇさんのUdemyコース「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」を受講しています。Chakra UIが3週間前（2024/10/22）にメジャーアップデートされ、v3に変更されました。 Announcing v3
https://www.chakra-ui.com/blog/00-announcing-v3

環境構築を行ったのは2024/11/16です。ChatGPTやネット検索の情報を参考に構築しようとしましたが、v2の情報が多く、うまくいきませんでした。この記事では、問題と解決方法を記載します。

問題

ViteでReactとTypeScriptのプロジェクトを構築しましたが、Udemyのコースを参考に設定を進める中で、さまざまなエラーに遭遇しました。まずはChakra UIのボタンを表示することを目標にしましたが、情報が古く、うまくいきませんでした。

• エラー内容

VSコード、ターミナル、Chromeのデバッグなどで多くのエラーが発生しました。以下はその一部です：

[plugin:vite:import-analysis] Failed to resolve import "@/components/ui/provider" from "src/App.tsx". Does the file exist?

モジュール '@/components/ui/provider' は '/Users/xxx/jakee2-chapter12-ChakraUI/jakee2-chapter12-chakraui/src/components/ui/provider.tsx' に解決されましたが、'--jsx' が設定されていません。

'allowImportingTsExtensions' が有効である場合、インポート パスの末尾には '.tsx' 拡張子のみを指定できます。ts(5097)

'--jsx' フラグが指定されていないと、JSX を使用できません。ts(17004) const React.StrictMode: React.ExoticComponent<{ children?: any; }>

型 '{}' には 型 '{ Component: any; pageProps: any; }' からの次のプロパティがありません: Component, pagePropsts(2739) (alias) function App({ Component, pageProps }: { Component: any; pageProps: any; }): JSX.Element import App

解決方法

Chakra UIの公式ドキュメントを確認したところ、Viteを使った環境構築方法が記載されていました。
https://www.chakra-ui.com/docs/get-started/frameworks/vite

以下に、最小限のボタンを表示するサンプルコードを示します。プロジェクトはViteを利用して、React × TypeScript × Chakra UIで作成しています。

• ボタンを表示
  

main.tsx

import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"

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

App.tsx

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

const App = () => {
        return (
                <>
                        <Button variant="surface" colorPalette="teal">
                                Auto Button
                        </Button>
                </>
        )
}

export default App;

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()],
})

tsconfig.json

{
        "compilerOptions": {
                // main.tsxでApp.jsをimportしてしまったため、importするファイルの拡張子を記載するようにする
                "allowImportingTsExtensions": true,
                "noEmit": true,
                "module": "ESNext",
                "moduleResolution": "Bundler",
                "skipLibCheck": true,
                "paths": {
                        "@/*": ["./src/*"]
                },
                "jsx": "react-jsx",
                "lib": ["dom", "es2015"]
        },
        "include": [
                "./src/**/*"
        ]
}

package.json

package.json

{
  "name": "jakee2-chapter12-chakraui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^3.1.2",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.7.7",
    "framer-motion": "^11.11.17",
    "next-themes": "^0.4.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.28.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10",
    "vite-tsconfig-paths": "^5.1.2"
  }
}

おわりに

ドキュメントを読み慣れていないので、この機会に読み方を覚えます。

参考