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?