[CJS-ESM interop] Behavior of requiring ESM from CJS is different with @rollup/plugin-commonjs

[haoqunjiang]

Requiring ESM from CJS + TypeScript __importDefault helper results in a nested structure, all the exports of the ESM file are wrapped in the .default property of the required variable.

See https://github.com/sodatea/cjs-require-esm-tests.git for a minimal reproduction.

Rollup fixes this issue with rollup/plugins#552

It is also the cause of #1323

[zhangyuang]

supplement something, for above repo, [email protected] will output different code from [email protected]

// source code
var __importDefault = (this && this.__importDefault) || function (mod) {
  console.log('mod', mod.__esModule)
  return (mod && mod.__esModule) ? mod : { "default": mod };
};
var dep = __importDefault(require("./dep.mjs"));

console.log('dep', dep)
console.log('dep.default', dep.default)
console.log('dep.name', dep.name)
console.log()

// [email protected]
var __defProp = Object.defineProperty;
var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
var __commonJS = (callback, module) => () => {
  if (!module) {
    module = {exports: {}};
    callback(module.exports, module);
  }
  return module.exports;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, {get: all[name], enumerable: true});
};

// dep.mjs
var require_dep = __commonJS((exports) => {
  __markAsModule(exports);
  __export(exports, {
    default: () => dep_default,
    name: () => name
  });
  var name = "dep";
  var dep_default = name;
});

// main.cjs
var require_main = __commonJS((exports) => {
  var __importDefault = exports && exports.__importDefault || function(mod) {
    console.log("mod", mod.__esModule);
    return mod && mod.__esModule ? mod : {default: mod};
  };
  var dep = __importDefault(require_dep());
  console.log("dep", dep);
  console.log("dep.default", dep.default);
  console.log("dep.name", dep.name);
  console.log();
});
export default require_main();

// [email protected]
var __defProp = Object.defineProperty;
var __esm = (fn, res) => function __init() {
  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
};
var __commonJS = (cb, mod) => function __require() {
  return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __export = (target, all) => {
  for (var name2 in all)
    __defProp(target, name2, { get: all[name2], enumerable: true });
};

// dep.mjs
var dep_exports = {};
__export(dep_exports, {
  default: () => dep_default,
  name: () => name
});
var name, dep_default;
var init_dep = __esm({
  "dep.mjs"() {
    name = "dep";
    dep_default = name;
  }
});

// main.cjs
var require_main = __commonJS({
  "main.cjs"(exports) {
    var __importDefault = exports && exports.__importDefault || function(mod) {
      console.log("mod", mod.__esModule);
      return mod && mod.__esModule ? mod : { "default": mod };
    };
    var dep = __importDefault((init_dep(), dep_exports));
    console.log("dep", dep);
    console.log("dep.default", dep.default);
    console.log("dep.name", dep.name);
    console.log();
  }
});
export default require_main();