title: Rollup, Esbuild | "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
body: <h3>Problem</h3>
  <p>I'm currently facing an interesting issue
  when bundling my npm package (Typescript) for <code>esm</code> with the target <code>ES2015</code>.
  For bundling, I use <code>rollup</code> and <code>esbuild</code>. <a href="https://github.com/agile-ts/agile/blob/master/packages/rollup.config.default.js" rel="nofollow noreferrer">See GitHub; (Line <code>71-101</code>)</a></p>
  <p><code>tsconfig.json</code></p>
  <pre><code>{
    &quot;extends&quot;: &quot;../tsconfig.default.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;outDir&quot;: &quot;dist&quot;,
      &quot;rootDir&quot;: &quot;src&quot;
    },
    &quot;include&quot;: [
      &quot;./src/**/*&quot; // Only include what is in src (-&gt; dist, tests, .. will be excluded)
    ]
  }
  </code></pre>
  <p><a href="https://github.com/agile-ts/agile/blob/master/packages/utils/tsconfig.json" rel="nofollow noreferrer">See here</a></p>
  <p>For whatever reason, almost every bundled <code>esm</code> file has a check to see if <code>require</code> is <code>undefined</code> in the file header (see image), even though <code>require</code> isn't used anywhere in the unbundled source code and, in fact, <code>esm</code> doesn't work with <code>require</code>, right?</p>
  <pre class="lang-js prettyprint-override"><code>// Added require check
  typeof require !== &quot;undefined&quot; ? require : (x) =&gt; {
    throw new Error('Dynamic require of &quot;' + x + '&quot; is not supported');
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/NjJIg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NjJIg.png" alt="enter image description here" /></a></p>
  <p>I wouldn't mind this check if not every React application that imports the <code>npm package</code> receives 100 warnings telling them that <code>require is used incorrectly</code>. (see image)</p>
  <p><a href="https://i.stack.imgur.com/hSk3M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hSk3M.png" alt="enter image description here" /></a></p>
  <pre><code>// Warning Message
  Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
  </code></pre>
  <h3>Question</h3>
  <p>Does anybody know why this described <code>require</code> check is added to the file header
  and how I can get rid of it.</p>
  <p>Note: I've already seen this post, but it's related to Angular, so I don't think it helps me much: <a href="https://stackoverflow.com/questions/51319209/critical-dependency-require-function-is-used-in-a-way-in-which-dependencies-can">Critical dependency: require function is used in a way in which dependencies cannot be statically extracted</a></p>