plugin-babel _rollupPluginBabelHelpers contains esm content but is interpreted as commonjs

[BPScott]

• Rollup Plugin Name: @rollup/plugin-babel
• Rollup Plugin Version: 5.3.0
• Rollup Version: 2
• Operating System (or Browser): osx
• Node Version: 12.22.6
• Link to reproduction : https://replit.com/@BPScott/rollup-plugin-babel-repl-helpers-bad-filename

Expected Behavior

Running rollup, and then running the output script is successful, it should console log out some content

Actual Behavior

Running rollup and then running the output script throws an error, as it is treating the _rollupPluginBabelHelpers.js file as a commonjs file thanks to the .js file extension, however it contains esm content.

file:///home/runner/rollup-plugin-babel-repl-helpers-bad-filename/output/index.mjs:1
import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
         ^^^^^^^^^^^^^
SyntaxError: Named export 'objectSpread2' not found. The requested module './_virtual/_rollupPluginBabelHelpers.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from './_virtual/_rollupPluginBabelHelpers.js';
const { objectSpread2: _objectSpread2 } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:142:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

Additional Information

When using the output options: output: { format: 'esm', dir: 'output', entryFileNames: '[name][assetExtname].mjs', preserveModules: true} and authoring source code that requires bundled babel helpers, the helpers are always output to a file called _rollupPluginBabelHelpers.js. This file is problematic as it contains esm code, but has a .js extension, and as there is no "type:module" in a package.json, node attempts to interpret this file as commonjs. Thus when you try to run node output/index.mjs it errors when trying to import the helper file as there is a mismatch (expected cjs but got esm).

This could be fixed by adding a "type:module" to the package.json to manipulate what type of content node expects when it sees a js file but in my real-world need for this I'm creating two builds - one with cjs content, and one mjs content and I'd like my cjs content to continue to use the .js file extension, while mjs content uses .mjs.

I believe plugin-babel needs a mechanism to control the output filename of the helpers file, instead of always outputting a .js file.

I'm not sure if there's any way that it can pick up the naming convention used by output.entryFileNames (and thus if my entryFileNames ends in a .mjs then I get a _rollupPluginBabelHelpers.mjs file). If not perhaps this could be solved by adding additional babelHelpers option called "bundledMjs" that outputs mjs files, or some other mechanism for controling the extension.

[BPScott]

Thinking about this a bit more, I don't think this is a problem with just plugin-babel.

Rollup does not apply the entryFileNames transform to virtual files when preserving modules, so this affects all virtual filenames. My problem would be fixed if virtual filenames were processed through entryFileNames the same as regular files.

[mmbrtstd]

Having this issue too! Any solution so far?

[BPScott]

i've opened the pull request rollup/rollup#4270, which should resolve this.