1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【React+Vite】TypeError: crypto.hash is not a function

Posted at

発生したエラー

Reactの環境構築をしていて、pnpm run devをしたところ、以下のエラーが出た

error when starting dev server:
TypeError: crypto.hash is not a function

vite(あるいは依存パッケージ)が Node.js の crypto モジュールの中の crypto.hash を使おうとしたが、環境にその関数がまだ存在していない、ということらしい

しかし、ここまで以下のコマンドで環境構築をしただけなので違和感があった

npm create vite@latest .

原因

Vite7以上では、Node.jsの必要バージョンが引き上げられていた
具体的には、20.19以降か、22.12以降が必要
参考:同じ問題のディスカッション

Compatibility Note
Vite requires Node.js version 20.19+, 22.12+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

対応方法

Viteのバージョンと、それに必要なNode.jsのバージョンを合わせる
修正前

  • Vite:v7.0.6
  • Node.js:v18.20.3

修正後

  • Vite:v7.0.6
  • Node.js:v22.18.0

関連知識の整理

  • React:WebサイトやWebアプリケーションのユーザーインターフェース (UI) を構築するためのJavaScriptライブラリ
  • Vite:高速な開発体験を提供するフロントエンドビルドツール
  • Node.js:JavaScriptをブラウザだけでなくサーバーサイドでも実行できるようにする環境
  • nvm:(Node Version Manager) Node.js のバージョン管理ツール
  • npm:(Node Package Manager)Node.jsに付属のパッケージ管理ツール。package.jsonに書かれた依存をnode_modulesに入れてくれる
  • pnpm:(Performant NPM)npmの代わりに使える、より速くて軽いパッケージマネージャ
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?