開発環境・前提
開発環境
Visual Studio 2022 Version 17.11.4
前提
2024年9月時点で「React」「C#」などのワードで検索すると「.net 8」より前のバージョンを使用したサンプルが多いように思われます。今回、Visual Studio 2022を使ってネット上にあるサンプルに倣い実行しようとすると同じ状態にならなかったため、基本的なことですがまとめておきます。
Sponsored Link新しいプロジェクトの作成
- Visual Studio 2022 「新しいプロジェクトの作成」で「React」で検索。
- 検索結果に表示されたテンプレートの中から「React and ASP.NET Core ※TypeScriptとなっているもの」を指定。
- 適当なソリューション名、「.net 8.0」でプロジェクト作成。
- 複数プロジェクト構成でソリューション完了。
※ 「(ソリューション名).client」と「(ソリューション名).Server」で作成されます。
そのまま実行しようとすると・・・
基本的に「WebForms」や「MVC」などで新規プロジェクトを作成し実行すると、初期ページなどが単純に表示される形となります。
この「React and ASP.NET Core」でも同様になるかと思いきや、ビルドエラーとなり、起動されない場合があるかと思います。
エラーメッセージを見ると「types/node」のバージョンが見つからないとなります。
npm ERR! notarget No matching version found for @types/node@^20.17.0.コマンドプロンプトで確認
このバージョンの「@types/node」がインストールされているか確認します。
npm show @types/node versions
インストールされているバージョンが一覧で表示されます。エラーとなった「20.17.0」はインストーされていません。
公式サイトでは、2024年9月時点で「20.17.0」となっていましたが、こちらをインストールしても状況は変わりませんでした。※今後のバージョンでは解消されているかも知れませんが。。。
そのため、設定ファイル上に記載されているバージョンを、上記のコマンドプロンプトで確認できたバージョンに変更することとします。「20.16.9」に変更します。
Sponsored Link記述は「package.json」内
package.json内の「devDependencies」に「@types/node」のバージョン記載があります。こちらを「20.16.9」に変更します。
そして、ビルドし実行します。ブラウザが起動され初期画面が表示されます。
