I’m trying to get Typescript modules working in a Blazor project. This is a brand new project, freshly created, with no twiddling of project settings by yours truly.

I get the error:

Uncaught ReferenceError ReferenceError: require is not defined
at (d:CodeScratchPadTestApp2wwwrootTSModTest.ts:2:1)

I get it that browsers don’t support require. But why is a brand new client-side Blazor app outputting code that browsers won’t work with? Obviously I must be missing something but what?

TestTs.razor:

@page "/TSTest"

@inject IJSRuntime JSRuntime

<script src="/TS/ModTestSub.js" type="text/javascript"></script>
<script src="/TS/ModTest.js" type="text/javascript"></script>

<h1>Typescript test</h1>

<button @onclick=LoadTS>Load TS file</button>

@code
{
   async void LoadTS()
   {
      var objModTest = await JSRuntime.InvokeAsync<IJSObjectReference>("GetModTest");
      await objModTest.InvokeVoidAsync("ShowMsg");
   }
}

ModTest.ts:

import * as SubMod from "./ModTestSub"

class ModTest {

   public ShowMsg() {
      SubMod.SubShowMsg();
   }

}

export function GetModTest(): ModTest {
   var result = new ModTest();
   return result;
}

ModTest.js (emitted code):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GetModTest = GetModTest;
var SubMod = require("./ModTestSub");
var ModTest = /** @class */ (function () {
    function ModTest() {
    }
    ModTest.prototype.ShowMsg = function () {
        SubMod.SubShowMsg();
    };
    return ModTest;
}());
function GetModTest() {
    var result = new ModTest();
    return result;
}
//# sourceMappingURL=ModTest.js.map

ModTestSub.ts

export function SubShowMsg() {
   alert("Sub show message");
}

ModTestSub.js (emitted code):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubShowMsg = SubShowMsg;
function SubShowMsg() {
    alert("Sub show message");
}
//# sourceMappingURL=ModTestSub.js.map