title: why is typescript generating javascript that chrome doesn't accept?
body: <p>I think I must be missing something very basic in typescript.   I use tsc to compile two .ts files that both reference another .ts module.   I get two errors from chrome for the .js that is generated,</p>
  <blockquote>
  <p>require is not defined</p>
  </blockquote>
  <blockquote>
  <p>Identifier 'util_1' has already been declared.</p>
  </blockquote>
  <p>Toy example that recreates the problem below.</p>
  <p>Folder structure is html and html/js.</p>
  <p>html has index.html</p>
  <p>html/js has file1.{ts,js} file2.{ts,js} util.{ts,js}</p>
  <p>html/index.html is</p>
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
   
  &lt;head&gt; 
      &lt;title&gt;This is the title&lt;/title&gt; 
  &lt;/head&gt; 
   
  &lt;body&gt; 
      &lt;!-- Main Page --&gt; 
      &lt;h1&gt;This is a header&lt;/h1&gt; 
      &lt;p&gt;Hello, world 
        &lt;!--- work around exports undefined error ---&gt; 
      &lt;script&gt;var exports = {}&lt;/script&gt; 
   
      &lt;script src=&quot;js/file1.js&quot;&gt;&lt;/script&gt; 
      &lt;script src=&quot;js/file2.js&quot;&gt;&lt;/script&gt; 
  &lt;/body&gt; 
  </code></pre>
  <p>file1.ts is</p>
  <pre><code>import {L} from './util' 
  L(&quot;I am file1&quot;)
  </code></pre>
  <p>file2.ts is</p>
  <pre><code>import {L} from './util' 
  L(&quot;I am file2&quot;) 
  </code></pre>
  <p>util.ts is</p>
  <pre><code>export function L(x:any) {console.log( x)} 
  </code></pre>
  <p>The generated .js that results is
  file1.js</p>
  <pre><code>&quot;use strict&quot;; 
  Object.defineProperty(exports, &quot;__esModule&quot;, { value: true }); 
  const util_1 = require(&quot;./util&quot;); 
  util_1.L(&quot;I am file1&quot;); 
  </code></pre>
  <p>file2.js</p>
  <pre><code>&quot;use strict&quot;; 
  Object.defineProperty(exports, &quot;__esModule&quot;, { value: true }); 
  const util_1 = require(&quot;./util&quot;); 
  util_1.L(&quot;I am file2&quot;); 
  </code></pre>
  <p>and util.js</p>
  <pre><code>&quot;use strict&quot;; 
  Object.defineProperty(exports, &quot;__esModule&quot;, { value: true }); 
  exports.L = void 0; 
  function L(x) { console.log(x); } 
  exports.L = L; 
  </code></pre>
  <p>Note the double definition of <strong>const util_1</strong> in the two .js files, and the <strong>require</strong> that the browser doesn't like.   What am I doing wrong!?</p>
  <hr />
  <p>Added after comments: I should have included tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
      &quot;module&quot;: &quot;commonjs&quot;,                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
        &quot;lib&quot;: [&quot;es5&quot;,&quot;es6&quot;,&quot;es7&quot;,
            &quot;es2015&quot;,&quot;es2016&quot;,
            &quot;es2017&quot;,&quot;es2018&quot;,&quot;es2019&quot;,&quot;dom&quot; ], /* Specify library files to be included in the compilation. */
      &quot;esModuleInterop&quot;: true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
      /* Advanced Options */
      &quot;skipLibCheck&quot;: true,                     /* Skip type checking of declaration files. */
      &quot;forceConsistentCasingInFileNames&quot;: true  /* Disallow inconsistently-cased references to the same file. */
    }
  }
  </code></pre>