title: module is not defined, exports is not defined - with typescript + react
body: <p>I have a very simple app using ASP 4/MVC 5, and Typescript (2.3.1.0)</p>
  
  <p>Here's the basic layout:</p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
  
    "compileOnSave": true,
    "compilerOptions": {
      "noImplicitAny": true,
      "noEmitOnError": true,
      "removeComments": false,
      "sourceMap": true,
      "target": "es5",
      "jsx": "preserve",
      "module": "commonjs",
      "allowSyntheticDefaultImports": true
    },
    "include": [
      "node_modules/@types/**/*.d.ts",
      "Scripts/**/*.ts",
      "Scripts/**/*.tsx"
    ]
  }
  </code></pre>
  
  <p>app.tsx (compiled to app.js using typescript tools for visual studio)</p>
  
  <pre><code>import React, { Component } from 'react';
  
  interface FooProps {
      name: string;
  }
  
  export default class Hello extends React.Component&lt;FooProps, undefined&gt; {
      render() {
          return &lt;h1&gt;Hello from {this.props.name} !&lt;/h1&gt;
      }
  }
  </code></pre>
  
  <p>_Layout.cshtml</p>
  
  <pre><code>&lt;body&gt;
      @RenderBody()
  
      &lt;script type="text/javascript" src="~/Scripts/jquery-2.2.4.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/node_modules/react/react.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/node_modules/react-dom/dist/react-dom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I run, this appears in the console:
  <a href="https://i.stack.imgur.com/Nf7dR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nf7dR.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to do this without using something like browserify/webpack. My question is, is it possible... and if so, how?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>app.jsx looks like this after the tsx -> jsx transpilation:</p>
  
  <pre><code>"use strict";
  var __extends = (this &amp;&amp; this.__extends) || (function () {
      var extendStatics = Object.setPrototypeOf ||
          ({ __proto__: [] } instanceof Array &amp;&amp; function (d, b) { d.__proto__ = b; }) ||
          function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
      return function (d, b) {
          extendStatics(d, b);
          function __() { this.constructor = d; }
          d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
      };
  })();
  Object.defineProperty(exports, "__esModule", { value: true });
  var react_1 = require("react");
  var Hello = (function (_super) {
      __extends(Hello, _super);
      function Hello() {
          return _super !== null &amp;&amp; _super.apply(this, arguments) || this;
      }
      Hello.prototype.render = function () {
          return &lt;h1&gt;Hello from {this.props.name} !&lt;/h1&gt;;
      };
      return Hello;
  }(react_1.default.Component));
  //# sourceMappingURL=app.jsx.map
  </code></pre>
  
  <p>Note, the error is thrown here:</p>
  
  <p><code>Object.defineProperty(exports, "__esModule", { value: true });</code></p>
  
  <blockquote>
    <p>Uncaught ReferenceError: exports is not defined</p>
  </blockquote>