transformMixedEsModules not working for mixed ESM/CommonJS modules

[19Qingfeng]

Hi everyone, I'm having some confusion when using the rollup plugin commonjs.

In my application, some third-party packages in node_modules use CommonJS syntax. By default, I use @rollup/plugin-commonjs to handle this code, and it works as expected.

However, when some modules have mixed ESM and CommonJS usage, it seems the commonjs plugin doesn't achieve the expected effect, even though I've already set the transformMixedEsModules parameter, but it still doesn't work.

For example, with this config file:

import { defineConfig } from 'rollup';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default defineConfig({
  input: 'index.js',
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'es'
    }
  ],
  plugins: [
    nodeResolve({
      preferBuiltins: false
    }),
    commonjs({
      transformMixedEsModules: true,
    })
  ],
  external: []
});

The content of index.js is quite simple:

"use strict";

import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.warning = warning;
function warning () {
  console.log('warning')
}

The final output bundle.esm.js still contains CommonJS statements:

import '@babel/runtime-corejs3/core-js-stable/instance/reduce';

Object.defineProperty(exports, "__esModule", {
  value: true
});
// commonjs not working
exports.warning = warning;
function warning () {
  console.log('warning');
}

I'm not sure if I'm using it wrong somewhere? Or how should I properly use it?

[RagedPanda]

transformMixedEsModules only covers half of "mixed". It converts require() calls inside a file that's otherwise ESM, but it doesn't touch exports.x = ... / module.exports in a file that has import/export. Once the plugin sees an import, it treats the file as ESM, and in ESM exports is just some free variable, so it's left as is.

Reproduced on @rollup/plugin-commonjs 29.0.3 with your index.js: exports.warning = warning is still in the bundle. Then with a file that has import { helper } from "./esm-helper.js" plus const dep = require("./cjs-dep.js"), the require was converted properly. That's the case the option is for.

The file you have is the problem here. "use strict" + Object.defineProperty(exports, "__esModule") + exports.x is Babel's CommonJS output, but it also has an import of a @babel/runtime-corejs3 helper. So a runtime helper got injected as an ESM import into a file that was built as CommonJS, and it's neither a valid ES module nor valid CommonJS. Nothing in Rollup can reliably fix that, since it's ambiguous which way the file should go.

Options, best first:

1. If it's your own package, fix its build so it emits one format. Either CommonJS all the way (the helper comes in via require) or ESM all the way (export function warning).
2. If it's a third-party package, check if it has a pure ESM or pure CJS build you can point to (module field, an es/ or lib/ folder, exports conditions). Often only one of the builds is broken.
3. As a last resort, patch-package the file into one format, e.g. turn the import into require(...) so the commonjs plugin sees plain CommonJS.