@babel/runtime -> SyntaxError: Unexpected token export -> helpers/esm/extends

[ashuorg]

Bug Report

@babel/runtime:

Current Behavior

  export default function _extends() {
  ^^^^^^
  SyntaxError: Unexpected token export
      at Module._compile (internal/modules/cjs/loader.js:721:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:690:17)
      at Module.Hook._require.Module.require (/Users/parent/child/node_modules/require-in-the-middle/index.js:80:39)
      at require (internal/modules/cjs/helpers.js:25:18)
      at Object.call (/Users/parent/child/server/webpack:/external "@babel/runtime/helpers/esm/extends":1:18)
      at r (/Users/<abs-path>/parent/child/server/webpack:/webpack/bootstrap:25:22)

Input Code
babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "uglify": true,
      },
      "modules": false,
      "useBuiltIns": true
    }],
    "react",
    "stage-1"
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "react",
        "stage-1"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
      ]
    }
  }
}

Expected behavior/code

Expect no error

[babel-bot]

Hey @ashuorg! 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."

[nicolo-ribaudo]

The esm folder contains es modules.
Do you have any other config Babel config enabling @babel/runtime?
What does npx nls why @babel/runtime say?

[ashuorg]

yes you are right it is not esm related issue i should edit the question

following is the logs of npx nls why @babel/runtime

child > react-router > history > @babel/runtime@7.9.2
child > react-router-dom > history > @babel/runtime@7.9.2
child > react-router-dom > react-router > history > @babel/runtime@7.9.2
child > react-transition-group > dom-helpers > @babel/runtime@7.9.2
child > workbox-webpack-plugin > @babel/runtime@7.9.2
child > workbox-webpack-plugin > workbox-build > @babel/runtime@7.9.2

Note: application structure is like following

parent-app
|-- components-parent
|-- .babelrc
|-- package.json
|-- child-app
      |-- components-childs // internal it import the parent components relatively
      |--.babelrc // as mentioned before
      |-- package.json

child package.json [following contains all babel related packages]

    "babel-core": "^6.26.3",
    "babel-eslint": "7.2.3",
    "babel-jest": "^24.8.0",
    "babel-loader": "7.1.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.6",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-1": "6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-plugin-dual-import": "^1.1.0",
    "babel-polyfill": "6.23.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-runtime": "^6.26.0",

[christian-valadez]

@ashuorg I've been running into this issue too - were you able to find a fix?

[mpeyper]

I've also just hit this issue. Very interested to know if there is fix.

[TrySound]

Use babel 7 and do not disable modules transpiling (commonjs is default).

[mpeyper]

Hi @TrySound,

I am using babel 7 already, but I don't know what you mean by "do not disable modules transpiling". I'm attempting to build a library for importing into other projects, so I only want to bundle the library code, and have all dependencies, including those added by babel transforms, treated as externals. Note: I am using version 1.32.1 of rollup, so this may have been fixed version ^2.0.0, but from looking into it, I don't believe it will make any difference.

My (simplified) rollup config is:

const babel = require('rollup-plugin-babel')
const commonjs = require('rollup-plugin-commonjs')
const nodeResolve = require('rollup-plugin-node-resolve')
const pkg = require('./package.json')

const externalList = [
  'core-js',
  '@babel/runtime',
  'regenerator-runtime',
  ...Object.keys(pkg.dependencies || {}),
  ...Object.keys(pkg.peerDependencies || {}),
]
const external = new RegExp(`^(${ externalList.join('|') })($|/)`)

module.exports = {
  input: 'src/index.js',
  output: [
    { format: 'es', file: 'es/index.js' },
    { format: 'cjs', file: 'lib/index.js', exports: 'named' },
  ],
  external: id => external.test(id)
  plugins: [
    babel({
      exclude: /node_modules/,
      runtimeHelpers: true,
      externalHelpers: false,
      extensions: ['.js', '.jsx'],
    }),
    commonjs({ include: /node_modules/ }),
    nodeResolve({
      extensions,
      mainFields: ['module', 'main'],
    }),
  ],
}

and my (simplified) babel config is:

module.exports = function () {
  const envOptions = {
    loose: true,
    modules: false,
    shippedProposals: true,
    useBuiltIns: 'usage',
    corejs: 2
  }

  const presets = [
    ['@babel/preset-env', envOptions],
  ]

  const plugins = [
    ['@babel/plugin-transform-runtime', { useESModules: true }]
  ]

  return {
    presets,
    plugins,
  }
}

This ends up with these imports in the es/index.js output:

import _extends from '@babel/runtime/helpers/esm/extends';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import 'regenerator-runtime/runtime';
import _asyncToGenerator from '@babel/runtime/helpers/esm/asyncToGenerator';

and these require statements in the lib/index.js output:

var _extends = _interopDefault(require('@babel/runtime/helpers/esm/extends'));
var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator'));
require('regenerator-runtime/runtime');
var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/esm/asyncToGenerator'));

The require for _extends is in the cjs output is failing when this library is imported in a jest test as the referenced file has unknown syntax (an es import line) and we're not transpiling node_modules (on purpose). This is the same error as reference in the original comment, which is what led me to this issue. I'm happy to raise a new issue if you'd prefer.

The useESModules: true on @babel/plugin-transform-runtime seems to be issue as setting it to false results in the cjs output having:

var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator'));
require('regenerator-runtime/runtime');
var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/asyncToGenerator'));

However, the non-esm files are also referenced from the es output:

import _extends from '@babel/runtime/helpers/extends';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import 'regenerator-runtime/runtime';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';

So what I would really like is some way to flip that option based on the output format of rollup, but from reading the documentation and the rollup-plugin-babel code, I don't think there is.

[TrySound]

You should split rollup config into two (you can export array of configs). And pass '@babel/plugin-transform-runtime' to each with useESModules and without. And avoid it in global config. See example https://github.com/renatorib/react-powerplug/blob/master/rollup.config.js#L64-L76

[mpeyper]

Thank you @TrySound. The config in question is actually being used as a babel preset itself (there's a reason I said "simplified" in my description), so I made useESModule an option of our preset and pass that on to @babel/plugin-transform-runtime, but the array of config was the key to passing different values for each format.

[mkermani144]

Any consistent solution on this?

[enkicoma]

Hi guys,

getting kind of related error using Next.js...

   at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
/sandbox/node_modules/@babel/runtime/helpers/esm/extends.js:1
export default function _extends() {
^^^^^^

here is my sandbox:
Sandbox-code

Any view/update on how to fix this? I am kind of stuck for days...

Much appreciated!

[nicolo-ribaudo]

The proper solution for this is to only set useESModule: true when you want Babel to use native ES modules in helpers. I'm closing this issue since it's a config problem.

However, starting from Babel 7.13.0 it will be possible to always omit useESModule: true, thus making it less likely to get this error (#12632).