始めに
React + TypeScript の学習中、npm run dev を実行したところ、今まで見たことのない黄色い警告が表示されました。
The CJS build of Vite's Node API is deprecated.
See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
「エラーではなさそうだけど、何が原因？
無視してもいいもの？？
そもそも何が起きてるの…？？？」
そんなモヤモヤがあったので、警告について調べてみました！
同じような警告に遭遇した方の参考になれば幸いです！
結論
最初に結論ですが、今回の警告はエラーではありません！
なので、npm run devでアプリケーションは普通に動くし、画面も表示されました。
この警告は、
将来はこうなる予定だから、今のうちに伝えておくよ！
という注意喚起なのです。
「deprecated」ってどういう意味？
今回の警告文にあった「deprecated」ですが、日本語訳すると「非推奨」となります。
主にIT分野での「非推奨」は、
将来的に使われなくなる予定である
という意味になるそうです。
つまり、「今は動くけど、今後は別のやり方にしてください」というメッセージなんです。
CJS（CommonJS）って何？
今回の警告文には「CJS」という単語も出てきました。
こちらはCommonJSという「JavaScriptでモジュールを扱うためのシステム」のことです。
主にNode.jsで使われてきたモジュールシステムで、別のモジュールを読み込んだり、他ファイルで使ってほしい関数などを使えるようにする際に使われるようです。
モジュールとは、特定の機能を独立させた部品のことです。
モジュールの説明はこちらがとても分かりやすいです！
参考） 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典様 [モジュールとは]
CommonJSでは、
- モジュールの読み込み ⇒
require() - 他から使ってもらう時 ⇒
module.exports
と記述するという特徴があります。
一方で、最近ではESモジュール（ECMAScript Modules）という書き方が主流になってきており、
- モジュールの読み込み ⇒ import
- 他から使ってもらう時 ⇒
export
という記述をします。
CommonJSについてはこちらの記事が大変参考になりました！
参考） @mk-mokumoku(渡邊琢資)様 [CommonJS と ES Modules の違い 🚀]
Viteでは今、何が起きている？
今回の学習ではViteを使ってプロジェクトを作成したのですが、Viteでは
- 新しい書き方（ESモジュール）を推奨している
- でも、昔の書き方（CJS）もまだ残している
- ただし CommonJSは将来的に廃止予定
という状態です。
なので、今回の警告は「CommonJS版はいずれ廃止予定なので覚えておいてくださいね」というViteからのアナウンスなんですね。
じゃあなぜ警告が出たのか？
警告の意味は分かりましたが、「自分でそんな書き方してないよな？」という疑問が生ました。
自分のコードが原因？
今回自作したファイルではCommonJSの書き方はしていませんでした。
調べてみるとこの警告は「Viteやライブラリの内部処理でCommonJSが一度でも使われたタイミングで表示される」ため、
- 自分がCommonJSの書き方をしたから
- 設定を間違えたから
という理由で発生したとは限らず、「正しく作ったプロジェクトでも出る可能性がある」というものだそうです。
というのも、CommonJSのほうが先に普及しており、多くのモジュールでCommonJSが採用されていることから、それらを使う可能性も高く警告の発生確率も上がっている…という構図のようです。
最近ではESモジュールに対応したり、移行したりする流れもあるようです。
ただ、書き方が結構違うので全部移行するのはなんだか難しそう…というド素人感想が浮かびました…🫨
まとめ
ここまで読んでいただきありがとうございました！
今回は自己学習中の警告ということで、「普通に動いている」点から、学習に影響がなさそうでしたので一旦そのままにしておくことにしました。
深堀り調査については、また別途チャレンジしてみたいと思います！
それでは最後にまとめです🌟
まだまだ学習途中なので、間違っている部分がありましたら
教えていただけると嬉しいです！🙏
コメント