cjs plugin: ExportNamedDeclaration of arrow function is missing .name

[FLGMwt]

NOTE: this seems to be fixed in 7.x either intentionally or from refactorings. I don't know the maintenance status of 6.x, so I'm opening this anyhow.

Choose one: is this a bug report or feature request? Bug

Input Code

Repro repo: https://github.com/FLGMwt/babel-cjs-bug

export const withExport = () => null;
const withoutExport = () => null;

console.log({
  withExport: withExport.name, // should be 'withExport', is ''
  withoutExport: withoutExport.name, // should be 'withoutExport', *is* 'withoutExport'
});

Babel/Babylon Configuration (.babelrc, package.json, cli command)

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

{
  "name": "babel-export-bug",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0"
  }
}

babel test.js | node

Expected Behavior

Output of babel test.js | node should be

{ withExport: 'withExport', withoutExport: 'withoutExport' }

Arrow functions should have their .name property defined by declarations, as demonstrated with the withoutExport function name.

Current Behavior

{ withExport: '', withoutExport: 'withoutExport' }

The arrow function that is also exported at the time of declaration is not given its name.

This seems to be because the output of the transform disassociates the arrow function from the variable declaration by injecting a cascading assignment to the module-wrapping code:

Object.defineProperty(exports, "__esModule", {
  value: true
});
const withExport = exports.withExport = () => null;
const withoutExport = () => null;

and I guess this turns the arrow function into an anonymous one.

Possible Solution

Possible solutions:

1. Separate variable declaration from the exports.withExport assignment
2. Explicitly assign the .name property to the function in a separate statement
3. Don't fix and wait for babel 7.x

If we're capable of fixing this in 6.x, I'm happy to give it a shot : )

Context

I was writing a tutorial for testing React apps using Enzyme. Building on create-react-app, I made some simple, stateless functional components and immediately exported them link. Enzyme uses a jQuery-like selector syntax for traversing a DOM-like structure which accepts string keys for components. React derives these keys/component names from function names, which in this case was missing. When I try to find these components in the test like this, I can't. (shows up as <Component /> instead of <SpyListItem />)

It's worth pointing out that this is only a problem for node-based unit tests. Dev tools use the same names to identify components, but those work in the browser usually since the env preset transforms arrow functions into named functions. The create-react-app config uses node: 'current', which, unless current is <=5.12, leaves arrows alone. After opening this, I'm gonna poke around that repo to see about pinning down the node env target.

I can work around this by explicitly naming the component, naming the function, querying by object reference, or exporting differently, but since I'm trying to reach a beginner audience, I don't want to have to do anything exceptional.

Your Environment

software	version(s)
Babel	^6.26.0
node	9.3.0
npm	5.6.0
Operating System	OSX

[babel-bot]

Hey @FLGMwt! 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]

This was fixed in 7.x purposefully and is a duplicate of #5630