見出し画像

TypeScript 入門の記録(4)TypeScript+React の簡単なプロジェクトのビルド成功!

昨日、TypeScript + Reactの簡単なプロジェクトのビルドに失敗して、webpack cli のエラーが解決できなかったので、今日は続きをやります。

プロジェクトビルド成功への道

webpack のドキュメントを見てみる

webpack cli のメッセージを読んで、API の不整合エラーらしいことはわかったのですが、そもそも「正しい、webpackの設定」がわからないまま、提供されたサンプルをそのまま使っているので、webpack の設定に何を記述しなければならないのか?を理解しなくてはと思いました。WSL2 は、webpack の最新をインストールした状態です。一方、サンプルが作成された頃から2~3年が経過していることも気になります。公式ドキュメントに、webpack4からwebpack5への移行マニュアル「To v5 from v4」がありました。

WSL2(Ubuntu) とVS Codeの起動

まず、現在のwebpackのバージョンを確認しようと思って、WSL2(Ubuntu)を起動して、VS Code を起動しました。そこで、VS Codeのターミナルメニューの npm コマンドを選択したところ、ふと「npm :clean」というコマンドが目に止まりました。そうだ、一旦、前回の実行結果を片付けてから今日の作業を始めよう。そしてダメ元で「npm:start」してみてもいいかもしれません。

あらっ、昨日は何度ビルドしても同じエラーが表示されていたのに、さっくりコンパイルに成功してしまいました!!!

VS Code から実行できた!

ふりかえり

結局、初回のエラーのあと、cleanすれば良かっただけかもしれません。ひとまず、目的は達成したので、次回は、「Create React Appを利用する」の手順を試したいと思います。あ、あと今日は、PowerShellも最新にしました。インストーラのキャラクターが、かっこいい。


この記事が気に入ったらサポートをしてみませんか?