【ITニュース解説】Summary of the Error ‘crypto.hash is not a function’ Encountered During Vite + Firebase Hosting Deployment and Its Solution

Webアプリケーションを開発し、インターネット上に公開する「デプロイ」という作業は、多くの技術が連携して行われる複雑なプロセスだ。今回の記事は、現代的なWebアプリケーション開発でよく使われる技術であるViteとReactで構築されたプロジェクトを、Firebase Hostingというサービスにデプロイしようとした際に発生したエラーと、その解決策について解説している。特に、GitHub Actionsというツールを使った自動デプロイの環境で起きた問題であり、システムエンジニアを目指す上で知っておくべき重要なトラブルシューティングの事例だ。

開発者は、ViteとReactで作成したWebアプリケーションをFirebase Hostingへ自動的にデプロイするため、GitHub Actionsという仕組みを利用していた。GitHub Actionsは、コードの変更を検知して自動的にテストやビルド、デプロイなどの作業を実行してくれる便利なツールだ。しかし、この自動化されたビルドプロセス中に予期せぬエラーが発生し、デプロイが中断してしまった。具体的に表示されたエラーメッセージは二つある。一つ目は「You are using Node.js 18.20.8. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version.」というもので、これは現在使用しているNode.jsのバージョンが18.20.8であり、Viteはバージョン20.19以上か22.12以上を要求しているため、Node.jsをアップグレードする必要があることを明確に示している。二つ目は「[vite:asset] Could not load /vite.svg (imported by src/App.tsx): crypto.hash is not a function」というメッセージで、これはViteが画像をロードしようとした際に、crypto.hashという関数が見つからなかったために処理が失敗したことを表している。この二つのエラーは関連しており、Node.jsのバージョンが古いことが根本原因で、その結果としてViteが内部で利用する特定の機能（crypto.hash）が動作しなかった、という状況だった。

なぜこのような問題が発生したのか。今回のケースでは、GitHub Actionsの実行環境がデフォルトでNode.jsバージョン18を使用していたことが原因だった。Node.jsは、JavaScriptをWebブラウザの外で実行するための実行環境であり、Viteのような開発ツールやアプリケーション自体が動作するために不可欠なものだ。ViteはWebアプリケーションの高速な開発とビルドを支援するツールだが、その新しいバージョン（Vite v7）は、より新しいNode.jsの機能やセキュリティ強化に依存するようになった。そのため、古いNode.js 18の環境では、Vite v7が期待するcrypto.hashのような機能が提供されていなかったり、その動作が変更されていたりしたため、Viteがエラーを起こしてビルドを完了できなかったのだ。これは、新しいアプリケーションやツールが古い実行環境では動かない、というバージョン間の互換性の問題に他ならない。

この問題の解決策は比較的明確で、Node.jsのバージョンをViteが要求するバージョンにアップグレードすることだった。具体的な手順は次の二つに分けられる。まず、GitHub Actionsの設定ファイル、通称「ワークフローファイル」と呼ばれるYAML形式のファイル内で、使用するNode.jsのバージョンを明示的に指定する必要がある。GitHub Actionsでは、actions/setup-node@v3という「アクション」を使ってNode.jsのセットアップを行う。このアクションの設定にnode-version: 22と追記することで、GitHub Actionsの実行環境がNode.jsバージョン22を使用するように変更できる。これにより、Vite v7が必要とする新しいNode.js環境が整い、crypto.hashのような機能も正しく利用できるようになる。次に、Node.jsのバージョンを上げた後、プロジェクトの依存関係を「クリーン」な状態で再インストールすることが重要だ。これはnpm installではなく、npm ciというコマンドを実行することで達成できる。npm ciは、package-lock.jsonというファイルに記録された正確なバージョンに基づいて依存関係をインストールするため、環境をより安定させ、再現性のあるビルドを可能にする。既存のパッケージを一度削除し、新しいNode.js環境に合わせて改めてインストールすることで、バージョンアップによる潜在的な問題を回避し、確実に動作する状態を整えることができる。

最終的にGitHub Actionsのワークフローファイルは、コードをリポジトリから取得するステップ、Node.jsバージョン22をセットアップするステップ、依存関係をnpm ciでインストールするステップ、そしてViteでビルドを実行するステップという流れになった。この変更を適用することで、デプロイのビルドプロセスは正常に完了し、WebアプリケーションをFirebase Hostingに公開できるようになったのだ。

今回の事例は、Webアプリケーション開発において、使用するツールやライブラリのバージョンと、それを実行する環境のバージョンの「互換性」がいかに重要かを示している。特に自動デプロイのようなCI/CD（継続的インテグレーション/継続的デリバリー）環境では、開発者が意識しなくてもシステムが自動的に特定の環境を準備するため、その環境が想定しているバージョンと実際に動かそうとしているツールのバージョンが合っているかを確認することが非常に大切だ。エラーメッセージを注意深く読み解くこと、そしてそれが示す根本原因（今回はNode.jsのバージョン不一致）を特定する能力は、システムエンジニアとして問題を解決するために不可欠なスキルとなるだろう。デプロイ時のエラーは初心者にとってつまずきやすいポイントだが、一つ一つ原因を特定し解決していく経験が、エンジニアとしての成長につながるはずだ。