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で作成しています。

- ボタンを表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881019/e203d0fe-36c8-762d-05d1-9562c936c4aa.png)

<details open><summary>main.tsx</summary>

```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>,
)
```
</details>

<details open><summary>App.tsx</summary>

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

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

export default App;
```
</details>

<details open><summary>vite.config.ts</summary>

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

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
})
```
</details>


<details open><summary>tsconfig.json</summary>

```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/**/*"
    ]
}
```
</details>

<details open><summary>package.json</summary>

```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"
  }
}
```
</details>

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


# 参考
https://www.chakra-ui.com/docs/get-started/frameworks/vite