【Vite × React × TypeScript】Chakra UI v3のインストールでエラーになる「Internal server error: Failed to resolve import "next-themes" from "src/components/ui/color-mode.tsx".」

# はじめに
お疲れ様です、りつです。

`React × TypeScript × Vite`の環境で`Chalkra UI`のv3を利用しようとしていたところ、環境構築から詰まってしまったので解消方法をまとめます。

## GitHubリポジトリ

https://github.com/ritsu21ctws/typescript-practice

# 問題1

Chakra UIの公式ドキュメントに沿って、インストール作業を進めました。

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

手順1～5まで進めたところ、ブラウザ上で以下のエラー画面になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/82d30395-bf44-2d42-9a7f-a7ea2f1648b8.png)

ターミナル上では以下のメッセージが表示されています。

```terminal:エラーメッセージ
10:35:33 PM [vite] Internal server error: Failed to resolve import "next-themes" from "src/components/ui/color-mode.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/ritsu/workspace/typescript-practice/src/components/ui/color-mode.tsx:5:40
  18 |  var _s = $RefreshSig$(), _s2 = $RefreshSig$(), _s3 = $RefreshSig$(), _s4 = $RefreshSig$();
  19 |  import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
  20 |  import { ThemeProvider, useTheme } from "next-themes";
     |                                           ^
  21 |  import * as React from "react";
  22 |  import { LuMoon, LuSun } from "react-icons/lu";
      at TransformPluginContext._formatError (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49255:41)
      at TransformPluginContext.error (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49250:16)
      at normalizeUrl (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64041:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64173:39
      at async Promise.all (index 4)
      at async TransformPluginContext.transform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64100:7)
      at async PluginContainer.transform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
      at async loadAndTransform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
```

なお、ボタン表示部分のソースコードは以下のように記述しております。

```react:src/App.tsx
import { Button } from "@/components/ui/button"
import { HStack } from "@chakra-ui/react"

function App() {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

export default App
```

# 解決方法1

以下のコマンドを実行しました。

```terminal
$ npm install next-themes
```

すると、エラーメッセージが「問題2」のように変わりました。

# 問題2

ブラウザ上のエラー内容は以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/0297abb2-4180-226d-fc6e-4911d8f8c773.png)

ターミナル上では以下のメッセージが表示されています。

```terminal:エラーメッセージ
10:38:13 PM [vite] Internal server error: Failed to resolve import "react-icons/lu" from "src/components/ui/color-mode.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/ritsu/workspace/typescript-practice/src/components/ui/color-mode.tsx:8:30
  20 |  import { ThemeProvider, useTheme } from "next-themes";
  21 |  import * as React from "react";
  22 |  import { LuMoon, LuSun } from "react-icons/lu";
     |                                 ^
  23 |  export function ColorModeProvider(props) {
  24 |    return /* @__PURE__ */ jsxDEV(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props }, void 0, false, {
      at TransformPluginContext._formatError (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49255:41)
      at TransformPluginContext.error (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49250:16)
      at normalizeUrl (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64041:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64173:39
      at async Promise.all (index 6)
      at async TransformPluginContext.transform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:64100:7)
      at async PluginContainer.transform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18)
      at async loadAndTransform (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51929:27)
      at async viteTransformMiddleware (file:///home/ritsu/workspace/typescript-practice/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:61881:24)
```

# 解決方法2

以下のコマンドを実行しました。

```terminal
$ npm install react-icons
```

結果、ブラウザ上では以下のようにボタンが表示されるようになりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/c3aca574-c1b0-d8f5-0895-d1dd5ebc7ca9.png)

# おわりに

まとめると、公式ドキュメントの内容 + 以下のライブラリをインストールすることでエラーを解消することができました。
- `next-themes`
- `react-icons`

これから`Chakra UI`に慣れていければと思います。

# 参考

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