title: Typescript in browser produces `ReferenceError: require is not defined`
body: <p>If I try to source index.js in my browser I get an error of:</p>
  
  <p>Uncaught ReferenceError: require is not defined</p>
  
  <p>According to <a href="https://stackoverflow.com/a/38531466/1663462">https://stackoverflow.com/a/38531466/1663462</a> I should 'bundle all the files into one' which I tried with setting:</p>
  
  <p><code>"outFile": "compiled.js"</code> however compiling then gives me an error of:</p>
  
  <blockquote>
    <p>index.ts:1:1 - error TS6131: Cannot compile modules using option
    'outFile' unless the '--module' flag is 'amd' or 'system'.</p>
    
    <p>1 import * as Highcharts from "highcharts";  </p>
  
  <pre><code>
  
  Found 1 error.
  </code></pre>
  </blockquote>
  
  <p>I'd appreciate if the answer could explain why this occurs, and what solutions are possible (there are various similar question / answers with just blindly suggesting things like CommonJS / systemjs)...</p>
  
  <hr>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
      "compilerOptions": {
          "allowJs": true,
          "sourceMap": true,
          "target": "es5",
      },
      "include": [
          "index.ts"
      ],
  
      "exclude": [
          "node_modules",
          "**/*.spec.ts"
      ]
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>"use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var Highcharts = require("highcharts");
  document.addEventListener('DOMContentLoaded', function () {
      var myChart = Highcharts.chart('container', {
          chart: {
              type: 'bar'
          },
          title: {
              text: 'Fruit Consumption'
          },
          xAxis: {
              categories: ['Apples', 'Bananas', 'Oranges']
          },
          yAxis: {
              title: {
                  text: 'Fruit eaten'
              }
          },
          series: [{
                  name: 'Jane',
                  data: [1, 0, 4]
              }, {
                  name: 'John',
                  data: [5, 7, 3]
              }]
      });
  });
  //# sourceMappingURL=index.js.map
  </code></pre>