Htmlを読み込んだ際にTypeScriptを読み込んでエラーが発生する【Asp.net core】

前提

Visual Studio 2019にて
Asp.net coreとTypeScriptを組み合わせてWebサーバーの実験を行っているのですが、
デバックでindex.htmlを読み込んだ際に、トランスコンパイルされたJavaScript以外に元のTypeScriptまで読み込まれているせいでエラーが発生しています。
TypeScriptを読み込まないようにするにはどのようにすればいいでしょうか？

発生している問題・エラーメッセージ

デベロッパーツール

ファイル階層

Html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <title>React Sample</title>
6</head>
7<body>
8    <h1>React Sample</h1>
9    <div id="root"></div>
10    <script>var exports = {};</script>
11    <script type="module" src="/js/app.js"></script>
12</body>
13</html>

生成されたJavaScriptコード

JavaScript
1"use strict";
2var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3    if (k2 === undefined) k2 = k;
4    var desc = Object.getOwnPropertyDescriptor(m, k);
5    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6      desc = { enumerable: true, get: function() { return m[k]; } };
7    }
8    Object.defineProperty(o, k2, desc);
9}) : (function(o, m, k, k2) {
10    if (k2 === undefined) k2 = k;
11    o[k2] = m[k];
12}));
13var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14    Object.defineProperty(o, "default", { enumerable: true, value: v });
15}) : function(o, v) {
16    o["default"] = v;
17});
18var __importStar = (this && this.__importStar) || function (mod) {
19    if (mod && mod.__esModule) return mod;
20    var result = {};
21    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22    __setModuleDefault(result, mod);
23    return result;
24};
25Object.defineProperty(exports, "__esModule", { value: true });
26var React = __importStar(require("react"));
27var ReactDOM = __importStar(require("react-dom"));
28ReactDOM.render(React.createElement("h1", null, "Hello, React!"), document.getElementById('root'));
29//# sourceMappingURL=app.js.map

補足情報（FW/ツールのバージョンなど）

Visual Studio 2019　Community
.Net 5.0
テンプレート　ASP.Net Core(空)

退会済みユーザー

2022/04/02 23:11

ASP.NET のタグを付けてください。 Visual Studio 2019 のバージョン、.NETCore のバージョン、使ったテンプレートは何かを書いてください。

退会済みユーザー

2022/04/03 10:37

Visual Studio 2019 のバージョンを書いてください。React とか Angular ならそれ用のテンプレートがあるので、それを使ってください。自己流ではダメです。

行動規範の内容に同意します

回答1件

ベストアンサー

回答のコメントにも書きましたが、React とか Angular ならそれ用のテンプレートがあるので、それを使ってください。自己流ではダメです。

以下の画像は、Visual Studio 2019 v16.11.11 でテンプレートに「React.js での ASP.NET Core」を選び、フレームワークを .NET 5.0 で作成したプロジェクトで、自動生成されたフォルダの構造と App.js (中身は JSX ファイル) です。

Visual Studio でビルドすると ClientApp フォルダ下に node_modules フォルダとその中に開発に必要なライブラリがインストールされます。Visual Studio から [デバッグ(D)] ⇒ [デバッグなしで開始(H)] (または [デバッグの開始(S)]) でアプリを実行すると以下のようにブラウザに表示されます。