3

Problem

I'm currently facing an interesting issue when bundling my npm package (Typescript) for esm with the target ES2015. For bundling, I use rollup and esbuild. See GitHub; (Line 71-101)

tsconfig.json

{
  "extends": "../tsconfig.default.json",
  "compilerOptions": {
    "target": "esnext",
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": [
    "./src/**/*" // Only include what is in src (-> dist, tests, .. will be excluded)
  ]
}

See here

For whatever reason, almost every bundled esm file has a check to see if require is undefined in the file header (see image), even though require isn't used anywhere in the unbundled source code and, in fact, esm doesn't work with require, right?

// Added require check
typeof require !== "undefined" ? require : (x) => {
  throw new Error('Dynamic require of "' + x + '" is not supported');
};

enter image description here

I wouldn't mind this check if not every React application that imports the npm package receives 100 warnings telling them that require is used incorrectly. (see image)

enter image description here

// Warning Message
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Question

Does anybody know why this described require check is added to the file header and how I can get rid of it.

Note: I've already seen this post, but it's related to Angular, so I don't think it helps me much: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

BennoDev
  • 1,067
  • 1
  • 6
  • 17

0 Answers0