ESM runtime helper files should have the .mjs extension

[jaydenseric]

Bug Report

Current behavior

Config

{
  presets: [
    [
      '@babel/env',
      {
        targets: {
          node: '6.10',
          browsers: '>1%'
        },
        modules: false,
        shippedProposals: true,
        loose: true
      }
    ]
  ],
  plugins: [
    ['@babel/transform-runtime', { useESModules: true }]
  ]
}

Input code

import React from 'react'

class Demo extends React.Component {}

Outputs:

import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose'
import React from 'react'

var Demo = (function(_React$Component) {
  _inheritsLoose(Demo, _React$Component)

  function Demo() {
    return _React$Component.apply(this, arguments) || this
  }

  return Demo
})(React.Component)

When run as native ESM in Node.js with --experimental-modules enabled:

node --experimental-modules lib/demo.mjs

@babel/runtime/helpers/esm/inheritsLoose resolves to node_modules/@babel/runtime/helpers/esm/inheritsLoose.js. Because Node.js can only run native ESM in files with the .mjs extension, this results in a runtime error:

$ node --experimental-modules lib/demo.mjs
(node:97782) ExperimentalWarning: The ESM module loader is experimental.
/Users/jaydenseric/Sites/demo/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js:1
(function (exports, require, module, __filename, __dirname) { export default function _inheritsLoose(subClass, superClass) {
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Proxy.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at createDynamicModule (internal/modules/esm/translators.js:56:15)
    at setExecutor (internal/modules/esm/create_dynamic_module.js:50:23)

Expected behavior/code

The ESM helper import should resolve a helper file with a .mjs extension.

Environment

• Babel version(s): v7.0.0-rc.1
• Node/npm version: Node.js v10.8.0 / npm v6.3.0
• OS: macOS v10.13.6
• Monorepo: No
• How you are using Babel: CLI

Possible Solution

Allow Babel helpers to be consumed in native CJS or ESM Node.js environments by publishing sibling .js (CJS) and .mjs (ESM) files. They should be imported using the same path so the Node.js import resolution algorithm will select the appropriate file for the environment:

- import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose'
+ import _inheritsLoose from '@babel/runtime/helpers/inheritsLoose'

Webpack and other tools have adopted the same resolution algorithm; Webpack actually prefers .mjs files for ESM.

Additional context/Screenshots

I would like to be able to generate an ESM build, that imports ESM helpers, that can run as native ESM in Node.js with --experimental-modules enabled.

[babel-bot]

Hey @jaydenseric! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[loganfsmyth]

Since Node's support for .mjs files is still quite experimental, I'm very hesitant to adopt it into the runtime. Once we do, it will mean that any package built and published to npm with a dependency on @babel/runtime could be more at risk of breakage should Node change it's behavior, and separately it means that Node itself could have a harder time landing their implementation because it they'd be more at risk of breaking published packages.

[nicolo-ribaudo]

Node's ESM implementation is now unflagged.

[nicolo-ribaudo]

This should now work when used with node 13.2, which is the first version supporting unflagged es modules.

[jaydenseric]

Should this issue should be reopened, as the previous work that closed it has been reverted? It’s a Babel v8 checklist item that’s still todo: #10746.

[jaydenseric]

What is the best workaround for those of us that can't wait until Babel v8 and need a solution now?

The option removeImportsExtension planned for v7.8 didn't seem to eventuate.

If there is no better way, I'm going to write a plugin that rewrites every import specifier starting with @babel/runtime/helpers/ to end with an appropriate .js/.mjs file extension.

[jaydenseric]

The plugin won't be able to add the required .mjs extensions to import specifiers within the helper modules though, so I guess that rules out using ESM via ['@babel/transform-runtime', { useESModules: true }] 😢

[jaydenseric]

Here is what I came up with; it really complicates the .babelrc.js:

function babelPluginAddBabelRuntimeFileExtensions({ types }) {
  return {
    visitor: {
      'ImportDeclaration|ExportNamedDeclaration'(path) {
        if (
          path.node.source &&
          path.node.source.value.startsWith('@babel/runtime/helpers/') &&
          !path.node.source.value.endsWith('.js')
        )
          path
            .get('source')
            .replaceWith(types.stringLiteral(`${path.node.source.value}.js`))
      }
    }
  }
}

const plugins = [
  '@babel/transform-runtime',
  'transform-require-extensions'
]

if (process.env.BABEL_ESM)
  plugins.push(babelPluginAddBabelRuntimeFileExtensions)

module.exports = {
  plugins,
  presets: [
    [
      '@babel/env',
      {
        modules: process.env.BABEL_ESM ? false : 'cjs',
        shippedProposals: true,
        loose: true
      }
    ]
  ]
}

Publishing this hack of a plugin is a hassle, as is copy pasting it across a bunch of packages. A proper fix in Babel would be awesome 🙏

[jaydenseric]

To workaround this issue I've published babel-plugin-transform-runtime-file-extensions, a Babel plugin that adds file extensions to Babel runtime import specifiers and require paths for Node.js ESM compatibility.

[JLHwung]

Fixed in @babel/runtime@7.12.0.