Dynamically importing CommonJS produces empty bundle

Dynamically importing a commonjs module from a esmodule asset produces an empty bundle.

<script type="module" src="./index.js"></script>

// index.js
import("./commonjs.js").then(v => console.log(v));

// commonjs.js
module.exports = 2;

Output (why is that even called ...exports?):

var $c0ee4c22c4f80f14efb8476eb9807b50$exports = {};
$c0ee4c22c4f80f14efb8476eb9807b50$exports = import('' + './commonjs.e4b0f555.js');
$c0ee4c22c4f80f14efb8476eb9807b50$exports.then(v => console.log(v));

./commonjs.e4b0f555.js is empty, without treeShake, the output is

// ...
var $dfc1ea661454a5b57fd7e754dd151b32$exports = {};
$dfc1ea661454a5b57fd7e754dd151b32$exports = 2;

We check b.env.outputFormat === 'esmodule', but this value is just inherited from that parent asset.

The root cause is of course that we don’t/can’t translate commonjs to esmodules, but this is a case where this might be unexpected.

cc @devongovett

[devongovett]

import() returns the entire module namespace. Should we just map the common JS module.exports object to that namespace if we detect it is CommonJS?

[mischnic]

Fixed by #3800