TypeScript Modules in Visual Studio 2015 Update 2 - 'require' is undefined

Question

In Visual Studio 2015 Enterprise (Update 2 installed) I've created a new TypeScript-Project TypeScriptHTMLApp1 from the Template (using default project settings). After that, I created the new TypeScript file log.ts and copied the example code from https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#11.3 to that newly created file.

// -------- log.ts --------  
export function message(s: string) {  
    console.log(s);  
}

Next, I copied the following lines of code to the beginning of the app.ts files.

// -------- app.ts --------  
import { message } from "./log";    
message("hello");

class Greeter {
    element: HTMLElement;

When I try to run this project in Internet Explorer (from inside the Microsoft visual Studio IDE), I receive the following error message:

Unhandled exception at line2, column 1 in http://localhost:20728/app.js
0x800a1391 - JavaScript runtime error: 'require' is undefined

ssube ssube · Accepted Answer · 2016-05-02T15:06:24

You need to include requirejs or bundle your scripts with webpack. TypeScript provides the module syntax and compiles down into require calls, but does not provide a runtime module loader. You must include that in your page for the scripts to work.

In the browser, make sure to provide the --module flag and specify the type of module you're using. This will typically be es6 for code you're running through webpack or amd/umd for older code using requirejs.

If you take a look at the TS compiler's output, you'll see that

import {foo} from './bar';

becomes

define(["require", "exports"], function (require, exports) {
    "use strict";
});

but note that define and the modules "require" and "exports" are not defined by the compiler.

If you're running in a node environment, the nodejs runtime provides the necessary functions for commonjs module loading.

TypeScript Modules in Visual Studio 2015 Update 2 - 'require' is undefined

1 Answers