Support for hybrid packages cjs/esm

[dubzzz]

I recently wanted to check how esbuild would deal with hybrid packages. By hybrid I mean packages handling both CommonJS and ES Modules at the same time.

And it seems that the behaviour diverges from other bundlers and also from node when using platform=node.

---

Here is what I tried to do:

I took fast-check as an example of such package and tried to run the following snippet:

import fc from 'fast-check'
console.log(fc.__type) // prints "commonjs" if cjs version is used, "module" otherwise

Content of main.js* (*main.mjs for the case '.mjs extension')

Here are the results I got with multiple bundlers (including esbuild):

Setup	Version imported	Link repro*
node (.mjs extension)	module	link
node (type=module)	module	link
esbuild (platform=browser)	module	link
esbuild (platform=node)	commonjs ⚠️	link
rollup	module	link
webpack	module	link

*In order to run the repro locally, you have to run: yarn && yarn start && echo out.txt

It seems that contrary to other setups, the one based on esbuild with platform=node imports the commonjs version.

My tests have been executed against [email protected] and [email protected].

---

I don't exactly know if it should be considered as expected or not, so I open the issue just in case it could help.

[osdevisnot]

I suspect this is a config issue. @dubzzz can you try passing --format=esm when you run esbuild?

By default esbuild will set module to cjs when building for mode platform as documented here: https://esbuild.github.io/api/#format

[dubzzz]

Oh, thanks a lot. I'll definitely retry with it. I'll let you know.

I was expecting to have the same behaviour as the others by default without any specific option but perfect if it works.

[dubzzz]

@osdevisnot It seems to give the exact same result when I use:

--- esbuild main.js --bundle --platform=node --outfile=dist/main.node.js
+++ esbuild main.js --bundle --platform=node --format=esm --outfile=dist/main.node.js

The build still imports the commonjs version.

[evanw]

This is likely deliberate behavior instead of a bug. There are some differences between the browser and node platforms for compatibility. From the documentation: https://esbuild.github.io/api/#platform:

When the platform is set to node: The main fields setting is set to main,module. This means tree shaking will likely not happen for packages that provide both module and main since tree shaking works with ECMAScript modules but not with CommonJS modules.

Unfortunately some packages incorrectly treat module as meaning "browser code" instead of "ECMAScript module code" so this default behavior is required for compatibility. You can manually configure the main fields setting to module,main if you want to enable tree shaking and know it is safe to do so.

Here's the issue that resulted in this change, with a lot of discussion: #363.

[dubzzz]

Thanks a lot for the quick response. Perfect 👌

I'm closing the issue

[dubzzz]

@evanw Does esbuild take into account exports field when using platform=node? If so, it should have used the module version and not the commonjs one 🤔

[evanw]

No it doesn’t yet. I still need to add that but given that the exports field can break working code, I’m waiting until the next breaking change release to implement that. This is tracked by #187.

[dubzzz]

Oh great! Thanks a lot your answers. I'll track the issue just to follow next moves