title: Uncaught ReferenceError: foo is not defined when using TypeScript + Webpack
body: <p>My Chrome extension works <em>fine</em> if I just use JavaScript.</p>
  <p>When I tried for TypeScript + Webpack, the issue I was facing was that the function <code>foo</code> was not found.</p>
  <blockquote>
  <p>Uncaught ReferenceError: foo is not defined</p>
  </blockquote>
  <p>manifest.json:</p>
  <pre><code>    &quot;content_scripts&quot;:
      [
          {
              &quot;js&quot;: [&quot;global.js&quot;, &quot;content.js&quot;],
              &quot;matches&quot;: [&quot;https://*.my-domain.com/*&quot;],
              &quot;run_at&quot;: &quot;document_end&quot;
          }
      ],
  </code></pre>
  <p>content.ts :</p>
  <pre><code>console.log(&quot;content.js&quot;);
  
  let afterDOMLoaded = () =&gt;
  {
      foo()
      .then((result) =&gt; console.log(result))
      .catch((error) =&gt; console.error(error));
  }
  
  if (document.readyState === 'loading')
  {
      document.addEventListener('DOMContentLoaded', afterDOMLoaded);
  }
  else
  {
      afterDOMLoaded();
  }
  </code></pre>
  <p>global.js :</p>
  <pre><code>console.log(&quot;global.js&quot;);
  
  let foo = async () =&gt;
  {
      await something();
  }
  </code></pre>
  <p>tsconfig.json :</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;outDir&quot;: &quot;./dist&quot;,
          &quot;allowJs&quot;: true,
          &quot;target&quot;: &quot;ES6&quot;
      },
      &quot;include&quot;: [
          &quot;./src/**/*&quot;
      ]
  }
  </code></pre>
  <p>webpack.config.js :</p>
  <pre><code>const path = require(&quot;path&quot;);
  const glob = require(&quot;glob&quot;);
  const CopyPlugin = require(&quot;copy-webpack-plugin&quot;);
  
  module.exports =
  {
      entry: glob.sync('./src/**/*.ts').reduce(function(obj, el)
      {
          obj[path.parse(el).name] = el;
          return obj;
      }, {}),
  
      output:
      {
          filename: &quot;[name].js&quot;,
          path: path.resolve(__dirname, &quot;dist&quot;)
      },
  
      module:
      {
          rules: [
              { test: /\.ts?$/, loader: &quot;ts-loader&quot; }
          ]
      },
  
      plugins: [
          new CopyPlugin(
          {
              patterns: [
              {
                  from: &quot;**&quot;,
                  to: path.resolve(__dirname, &quot;dist&quot;),
                  context: path.resolve(__dirname, &quot;src&quot;),
                  globOptions: { ignore: [&quot;**/*.ts&quot;] },
                  force: true
              }]
          })
      ],
      
      optimization:
      {
          minimize: false,
          splitChunks: 
          {
              chunks: &quot;all&quot;
          }
      }
  }
  </code></pre>
  <p>I can see that the ordering of loading the scripts is also correct as console.log shows :</p>
  <pre><code>global.js
  content.js
  </code></pre>
  <p>If I define <code>foo</code> in content.ts, right on top, then everything works.<br></p>
  <p>So I don't know where the issue is, webpack or typescript ?</p>