webpack compiles node_modules

I found out an interesting use case as we import a module (just call it foo) which supports both node and browser. But with the same import of foo, webpack would end up a different result in the browser. Let's have a look at the following example:

Firstly, assume to have a package foo like below:

- dist
-- index.js (cjs)
-- index.module.js (esm - mostly for browser)

The content of foo would look like in both modules:

// dist/index.js 
// the content can be `cjs` or `umd`, for example:
module.exports = 1;

// dist/index.module.js
export default 1;

Next, write a simple snippet to import foo in cjs style:

const foo = require('foo');

console.log(foo);

Then run on Node:

const foo = require('foo');

// since above line of code ref to dist/index.js so will work as expected
console.log(foo); // 1

Finally, run on browser via webpack after having been transformed:

// webpack auto select `esm` module by default
var foo = __webpack_require__("./node_modules/foo/index.module.js");

// __webpack_require__ will turn the foo object to be like: 
// { default: 1 }

// As a result of that, this code won't work as expected
console.log(foo); // undefined

To sum up, we have to be careful with the package (foo) which supports running on node/browser to avoid unexpected result as above. As I know most of packages are now being implemented that way. If you write code in Typescript or Esnext style, you can enable the configuration { esModuleInterop: true } to import helper to sort out the issue in case of Typescript.

Thanks for reading!