TypeScript 入門の記録（４）TypeScript＋React の簡単なプロジェクトのビルド成功！
昨日、TypeScript + Reactの簡単なプロジェクトのビルドに失敗して、webpack cli のエラーが解決できなかったので、今日は続きをやります。
プロジェクトビルド成功への道
webpack のドキュメントを見てみる
webpack cli のメッセージを読んで、API の不整合エラーらしいことはわかったのですが、そもそも「正しい、webpackの設定」がわからないまま、提供されたサンプルをそのまま使っているので、webpack の設定に何を記述しなければならないのか？を理解しなくてはと思いました。WSL2 は、webpack の最新をインストールした状態です。一方、サンプルが作成された頃から２～３年が経過していることも気になります。公式ドキュメントに、webpack4からwebpack5への移行マニュアル「To v5 from v4」がありました。
このあたりを読んでみようか。ん、待てよ？GitHub のプロジェクトの最終更新が3年前だから、その頃の webpack のバージョンを確認するのが先かな。https://t.co/ia8J8kAgG4
— きー坊ASP.Net なう 💉💉 (@jnkykn) February 13, 2022
あと、今更だけど、Getting Started も読んで試してみよう。https://t.co/yZNCRd6j7v
— きー坊ASP.Net なう 💉💉 (@jnkykn) February 13, 2022
WSL2(Ubuntu) とVS Codeの起動
まず、現在のwebpackのバージョンを確認しようと思って、WSL2(Ubuntu)を起動して、VS Code を起動しました。そこで、VS Codeのターミナルメニューの npm コマンドを選択したところ、ふと「npm :clean」というコマンドが目に止まりました。そうだ、一旦、前回の実行結果を片付けてから今日の作業を始めよう。そしてダメ元で「npm:start」してみてもいいかもしれません。
npm clean 実行して、npm start したら、さっくり正常にコンパイルできた！！！ pic.twitter.com/KzucgiRJYV
— きー坊ASP.Net なう 💉💉 (@jnkykn) February 14, 2022
あらっ、昨日は何度ビルドしても同じエラーが表示されていたのに、さっくりコンパイルに成功してしまいました！！！
ふりかえり
結局、初回のエラーのあと、cleanすれば良かっただけかもしれません。ひとまず、目的は達成したので、次回は、「Create React Appを利用する」の手順を試したいと思います。あ、あと今日は、PowerShellも最新にしました。インストーラのキャラクターが、かっこいい。
この記事が気に入ったらサポートをしてみませんか？