<h1 dir="auto">Bug report</h1>




<p dir="auto">I initially opened this as an issue in <code class="notranslate">karma-webpack</code>, but <a href="https://github.com/ryanclark/karma-webpack/issues/497#issuecomment-784434254" data-hovercard-type="issue" data-hovercard-url="/ryanclark/karma-webpack/issues/497/hovercard">found the code responsible to be in <code class="notranslate">webpack@5.x.x</code></a>.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'webpackChunk' of undefined
  at C:/Users/%USERNAME%/AppData/Local/Temp/_karma_webpack_645953/runtime.js:100:64

  TypeError: Cannot read property 'webpackChunk' of undefined
      at C:/Users/%USERNAME%/AppData/Local/Temp/_karma_webpack_645953/runtime.js:100:64
      at C:/Users/%USERNAME%/AppData/Local/Temp/_karma_webpack_645953/runtime.js:130:12
      at C:/Users/%USERNAME%/AppData/Local/Temp/_karma_webpack_645953/runtime.js:137:12"><pre class="notranslate"><span class="pl-v">Uncaught</span> TypeError: <span class="pl-v">Cannot</span> <span class="pl-s1">read</span> <span class="pl-s1">property</span> <span class="pl-s">'webpackChunk'</span> <span class="pl-s1">of</span> <span class="pl-c1">undefined</span>
  at <span class="pl-v">C</span>:<span class="pl-pds"><span class="pl-c1">/</span>Users<span class="pl-c1">/</span></span><span class="pl-c1">%</span><span class="pl-c1">USERNAME</span><span class="pl-c1">%</span><span class="pl-pds"><span class="pl-c1">/</span>AppData<span class="pl-c1">/</span></span><span class="pl-v">Local</span><span class="pl-c1">/</span><span class="pl-v">Temp</span><span class="pl-c1">/</span><span class="pl-s1">_karma_webpack_645953</span><span class="pl-c1">/</span><span class="pl-s1">runtime</span><span class="pl-kos">.</span><span class="pl-c1">js</span>:<span class="pl-c1">100</span>:<span class="pl-c1">64</span>

  TypeError: <span class="pl-v">Cannot</span> <span class="pl-s1">read</span> <span class="pl-s1">property</span> <span class="pl-s">'webpackChunk'</span> <span class="pl-s1">of</span> <span class="pl-c1">undefined</span>
      at <span class="pl-v">C</span>:<span class="pl-pds"><span class="pl-c1">/</span>Users<span class="pl-c1">/</span></span><span class="pl-c1">%</span><span class="pl-c1">USERNAME</span><span class="pl-c1">%</span><span class="pl-pds"><span class="pl-c1">/</span>AppData<span class="pl-c1">/</span></span><span class="pl-v">Local</span><span class="pl-c1">/</span><span class="pl-v">Temp</span><span class="pl-c1">/</span><span class="pl-s1">_karma_webpack_645953</span><span class="pl-c1">/</span><span class="pl-s1">runtime</span><span class="pl-kos">.</span><span class="pl-c1">js</span>:<span class="pl-c1">100</span>:<span class="pl-c1">64</span>
      at <span class="pl-v">C</span>:<span class="pl-pds"><span class="pl-c1">/</span>Users<span class="pl-c1">/</span></span><span class="pl-c1">%</span><span class="pl-c1">USERNAME</span><span class="pl-c1">%</span><span class="pl-pds"><span class="pl-c1">/</span>AppData<span class="pl-c1">/</span></span><span class="pl-v">Local</span><span class="pl-c1">/</span><span class="pl-v">Temp</span><span class="pl-c1">/</span><span class="pl-s1">_karma_webpack_645953</span><span class="pl-c1">/</span><span class="pl-s1">runtime</span><span class="pl-kos">.</span><span class="pl-c1">js</span>:<span class="pl-c1">130</span>:<span class="pl-c1">12</span>
      at <span class="pl-v">C</span>:<span class="pl-pds"><span class="pl-c1">/</span>Users<span class="pl-c1">/</span></span><span class="pl-c1">%</span><span class="pl-c1">USERNAME</span><span class="pl-c1">%</span><span class="pl-pds"><span class="pl-c1">/</span>AppData<span class="pl-c1">/</span></span><span class="pl-v">Local</span><span class="pl-c1">/</span><span class="pl-v">Temp</span><span class="pl-c1">/</span><span class="pl-s1">_karma_webpack_645953</span><span class="pl-c1">/</span><span class="pl-s1">runtime</span><span class="pl-kos">.</span><span class="pl-c1">js</span>:<span class="pl-c1">137</span>:<span class="pl-c1">12</span></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>set <code class="notranslate">output.globalObject</code> to <code class="notranslate">"this"</code>
<ul dir="auto">
<li>setting <code class="notranslate">output.libraryTarget</code> to <code class="notranslate">"umd"</code> does not seem to change the end result</li>
</ul>
</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No errors to be thrown by Webpack's bootstrap code.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  <code class="notranslate">5.23.0</code><br>
Node.js version: <code class="notranslate">14.2.0</code><br>
Operating System: <code class="notranslate">Windows 10</code><br>
Additional tools:</p>
<ul dir="auto">
<li>NPM Version: <code class="notranslate">6.14.11</code> (yarn: <code class="notranslate">1.22.5</code>)</li>
<li>see <code class="notranslate">package.json</code> below for more tools (10 dependencies total, including webpack)</li>
</ul>
<details>
<summary>minimal <code class="notranslate">package.json</code></summary>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ./package.json
{
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;karma start&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/core&quot;: &quot;7.12.17&quot;,
    &quot;@babel/preset-env&quot;: &quot;7.12.17&quot;,
    &quot;babel-loader&quot;: &quot;8.2.2&quot;,
    &quot;core-js&quot;: &quot;3.9.0&quot;,
    &quot;karma&quot;: &quot;6.1.1&quot;,
    &quot;karma-chrome-launcher&quot;: &quot;3.1.0&quot;,
    &quot;karma-ie-launcher&quot;: &quot;1.0.0&quot;,
    &quot;karma-jasmine&quot;: &quot;4.0.1&quot;,
    &quot;karma-webpack&quot;: &quot;5.0.0&quot;,
    &quot;webpack&quot;: &quot;5.23.0&quot;
  },
  &quot;browserslist&quot;: [
    &quot;last 1 chrome version&quot;,
    &quot;last 1 edge version&quot;,
    &quot;last 1 firefox version&quot;,
    &quot;last 1 safari version&quot;,
    &quot;ie 11&quot;
  ]
}
"><pre class="notranslate"><span class="pl-c">// ./package.json</span>
<span class="pl-kos">{</span>
  <span class="pl-s">"private"</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-s">"scripts"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"test"</span>: <span class="pl-s">"karma start"</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-s">"devDependencies"</span>: <span class="pl-kos">{</span>
    <span class="pl-s">"@babel/core"</span>: <span class="pl-s">"7.12.17"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/preset-env"</span>: <span class="pl-s">"7.12.17"</span><span class="pl-kos">,</span>
    <span class="pl-s">"babel-loader"</span>: <span class="pl-s">"8.2.2"</span><span class="pl-kos">,</span>
    <span class="pl-s">"core-js"</span>: <span class="pl-s">"3.9.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"karma"</span>: <span class="pl-s">"6.1.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"karma-chrome-launcher"</span>: <span class="pl-s">"3.1.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"karma-ie-launcher"</span>: <span class="pl-s">"1.0.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"karma-jasmine"</span>: <span class="pl-s">"4.0.1"</span><span class="pl-kos">,</span>
    <span class="pl-s">"karma-webpack"</span>: <span class="pl-s">"5.0.0"</span><span class="pl-kos">,</span>
    <span class="pl-s">"webpack"</span>: <span class="pl-s">"5.23.0"</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-s">"browserslist"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"last 1 chrome version"</span><span class="pl-kos">,</span>
    <span class="pl-s">"last 1 edge version"</span><span class="pl-kos">,</span>
    <span class="pl-s">"last 1 firefox version"</span><span class="pl-kos">,</span>
    <span class="pl-s">"last 1 safari version"</span><span class="pl-kos">,</span>
    <span class="pl-s">"ie 11"</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
</details>
<details>
<summary>babel, webpack, and karma configurations</summary>
<p dir="auto">My original webpack configuration was a modified version of <code class="notranslate">react-scripts</code>, which also uses <code class="notranslate">output.globalObject: "this"</code>.</p>
<p dir="auto">While debugging the error, I stripped karma, webpack, and babel configurations to the minimum:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ./karma.conf.js
process.env.BABEL_ENV = 'test'
process.env.NODE_ENV = 'test'

const path = require('path')

module.exports = function(config) {
  config.set({
    plugins: [
      'karma-chrome-launcher',
      'karma-ie-launcher',
      'karma-jasmine',
      'karma-webpack',
    ],
    browsers: ['IE', 'Chrome'],
    frameworks: ['jasmine', 'webpack'],
    files: [{pattern: 'src/**/*.test.js', watched: false}],
    preprocessors:   {'src/**/*.test.js': ['webpack']},
    reporters: ['progress'],
    webpack: {
      mode: 'development',
      devtool: 'inline-source-map',
      output: {
        globalObject: 'this'
      },
      module: {
        rules: [
          {
            test: /\.(js|mjs|jsx|ts|tsx|cjs)$/,
            include: [path.resolve(__dirname, 'src')],
            loader: 'babel-loader',
            options: {
              // babel-loader specific options
              cacheDirectory: false,
              cacheCompression: false,

              // babel options
              compact: false,
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: '3.9',
                  }
                ]
              ]
            }
          }
        ]
      }
    }
  })
}
"><pre class="notranslate"><span class="pl-c">// ./karma.conf.js</span>
<span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">BABEL_ENV</span> <span class="pl-c1">=</span> <span class="pl-s">'test'</span>
<span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">=</span> <span class="pl-s">'test'</span>

<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
      <span class="pl-s">'karma-chrome-launcher'</span><span class="pl-kos">,</span>
      <span class="pl-s">'karma-ie-launcher'</span><span class="pl-kos">,</span>
      <span class="pl-s">'karma-jasmine'</span><span class="pl-kos">,</span>
      <span class="pl-s">'karma-webpack'</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">browsers</span>: <span class="pl-kos">[</span><span class="pl-s">'IE'</span><span class="pl-kos">,</span> <span class="pl-s">'Chrome'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">frameworks</span>: <span class="pl-kos">[</span><span class="pl-s">'jasmine'</span><span class="pl-kos">,</span> <span class="pl-s">'webpack'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">files</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span><span class="pl-c1">pattern</span>: <span class="pl-s">'src/**/*.test.js'</span><span class="pl-kos">,</span> <span class="pl-c1">watched</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">preprocessors</span>:   <span class="pl-kos">{</span><span class="pl-s">'src/**/*.test.js'</span>: <span class="pl-kos">[</span><span class="pl-s">'webpack'</span><span class="pl-kos">]</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">reporters</span>: <span class="pl-kos">[</span><span class="pl-s">'progress'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">webpack</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">mode</span>: <span class="pl-s">'development'</span><span class="pl-kos">,</span>
      <span class="pl-c1">devtool</span>: <span class="pl-s">'inline-source-map'</span><span class="pl-kos">,</span>
      <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">globalObject</span>: <span class="pl-s">'this'</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
          <span class="pl-kos">{</span>
            <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>mjs<span class="pl-c1">|</span>jsx<span class="pl-c1">|</span>ts<span class="pl-c1">|</span>tsx<span class="pl-c1">|</span>cjs<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
            <span class="pl-c1">include</span>: <span class="pl-kos">[</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'src'</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
            <span class="pl-c1">loader</span>: <span class="pl-s">'babel-loader'</span><span class="pl-kos">,</span>
            <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
              <span class="pl-c">// babel-loader specific options</span>
              <span class="pl-c1">cacheDirectory</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
              <span class="pl-c1">cacheCompression</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>

              <span class="pl-c">// babel options</span>
              <span class="pl-c1">compact</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
              <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
                <span class="pl-kos">[</span>
                  <span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">,</span>
                  <span class="pl-kos">{</span>
                    <span class="pl-c1">useBuiltIns</span>: <span class="pl-s">'entry'</span><span class="pl-kos">,</span>
                    <span class="pl-c1">corejs</span>: <span class="pl-s">'3.9'</span><span class="pl-kos">,</span>
                  <span class="pl-kos">}</span>
                <span class="pl-kos">]</span>
              <span class="pl-kos">]</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">]</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
</details>
<details>
<summary>entry point code</summary>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ./src/foo.test.js
it('should pass', () =&gt; {
  expect(true).toBe(true)
})
"><pre class="notranslate"><span class="pl-c">// ./src/foo.test.js</span>
<span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should pass'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
</details>
<hr>
<p dir="auto">The cause of the problem seems to be the bootstrap code using strict mode without setting the execution context, so "this" results in <code class="notranslate">undefined</code> instead of a reference to the window object.</p>
<p dir="auto">I've recently run into a bit of a frustrating situation trying to provide ESM build of libraries along-side commonjs ones. Ideally the ESM code should always be used by webpack, and allow cherry picking modules (as to not have to rely solely on treeshaking).</p>
<p dir="auto">Currently, with the strictness of importing none mjs files into <code class="notranslate">.mjs</code> we can't compile the same codebase in a way that works as cjs or esm modules. take the following example:</p>
<p dir="auto">_<strong>MyComponent.mjs</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { polyfill } from 'react-lifecycle-compat';

// use polyfill(Component) etc."><pre class="notranslate"><code class="notranslate">import { polyfill } from 'react-lifecycle-compat';

// use polyfill(Component) etc.
</code></pre></div>
<p dir="auto"><code class="notranslate">react-lifecycle-compat</code> exposes both a esm build (<code class="notranslate">.js</code>) and a cjs file here (compiled esm -&gt; cjs)</p>
<p dir="auto">What <strong>I want to do is compile MyComponent.mjs with babel to MyComponent.js</strong> and ship both files, relying on webpack to resolve the <code class="notranslate">.mjs</code> file before the <code class="notranslate">.js</code> one. <strong>However</strong> this won't work.</p>
<ul dir="auto">
<li><code class="notranslate">react-lifecycle-compat</code> is not <code class="notranslate">.mjs</code> so webpack considers it not an esm file and requires i write the import as: <code class="notranslate">import ReactLifeCycleCompat from 'react-lifecycle-compat';</code>,</li>
<li>Compiling this to cjs will also break, because of <code class="notranslate">react-lifecycle-compat</code>'s <code class="notranslate">__esmodule</code> flag, so I <strong>can't</strong> import that as a default because babel sees taht it's only named exports.</li>
</ul>
<h3 dir="auto">TL: DR;</h3>
<p dir="auto">Consuming compiled, <code class="notranslate">__esmodule</code> flagged, modules with name exports cannot be written in a way that satisfies both cjs and mjs consumers.</p>
<p dir="auto">I realize I can configure webpack to treat <code class="notranslate">mjs</code> as <code class="notranslate">javascript/auto</code> but that's not ideal, because I'm interested in providing libraries that can be consumed by webpack and node witthout requiring users to configure something, while also wanting to move towards future standards and take advantage of esm optimizations</p>