title: How to fix "ReferenceError: exports is not defined" in a pure TypeScript project?
body: <p>If I write a .ts with any kind of import or export instruction the resulting .js will generate the following error when loaded in an HTML page:  "ReferenceError: exports is not defined"</p>
  
  <p>How to reproduce:</p>
  
  <ol>
  <li>Create a Blank Node.js web application project in VS</li>
  <li>Add a .ts with an import or export line</li>
  <li>Add some HTML calling the resulting .js</li>
  <li>Start an HTTP server (<code>http-server -g [port]</code>) and reach your HTML</li>
  </ol>
  
  <p>I tried:</p>
  
  <ul>
  <li>Targetting ES 5</li>
  <li>Removing the line <code>"module": "commonjs"</code> from tsconfig.json`</li>
  <li>Installing CommonJS and SystemJS</li>
  <li>Compiling the .ts using <code>tsc</code></li>
  <li>Any other solution Stack Overflow has in similar questions</li>
  <li>All the possible permutations of the above.</li>
  </ul>
  
  <p>My .ts (can be anything if it has an import instruction):</p>
  
  <pre><code>import { setTimeout } from "timers";
  setTimeout(() =&gt; console.log("asdf"), 1000);
  </code></pre>
  
  <p>The HTML just has a simple body referencing the script</p>
  
  <p>My package.json</p>
  
  <pre><code>{
    "name": "nodejs-web-app4",
    "version": "0.0.0",
    "description": "NodejsWebApp4",
    "main": "server.js",
    "author": {
      "name": ""
    },
    "devDependencies": {
      "@types/node": "^8.0.14"
    }
  }
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "lib": ["es6"],
      "sourceMap": true
    },
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>
  
  <p>Resulting .js:</p>
  
  <p>From VS build (results in <code>ReferenceError: exports is not defined</code>):</p>
  
  <pre><code>"use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  const timers_1 = require("timers");
  timers_1.setTimeout(() =&gt; console.log("asdf"), 1000);
  //# sourceMappingURL=home-script.js.map
  </code></pre>
  
  <p>From command <code>tsc [filename].ts</code> (results in <code>ReferenceError: exports is not defined</code>):</p>
  
  <pre><code>"use strict";
  exports.__esModule = true;
  var timers_1 = require("timers");
  timers_1.setTimeout(function () { return console.log("asdf"); }, 1000);
  </code></pre>
  
  <p>From VS Build but removing <code>"module": "commonjs"</code> from tsconfig (results in <code>SyntaxError: import declarations may only appear at top level of a module</code>):</p>
  
  <pre><code>import { setTimeout } from "timers";
  setTimeout(() =&gt; console.log("asdf"), 1000);
  //# sourceMappingURL=asdf.js.map
  </code></pre>
  
  <p>All the HTML and ts will be called as "static" (no MVC)</p>
  
  <p>Is it wrong to use <code>http-server</code> to see static HTML from my VS project? Is that the issue?</p>
  
  <p>Should build any other way? Use a different setup?</p>
  
  <p>I have a workaround (i.e., keep everything I need in the same TypeScript file), but it confuses me that I can't create and visualize a simple project with Node/TS.</p>