New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cjs plugin: ExportNamedDeclaration of arrow function is missing `.name` #7194

Closed
FLGMwt opened this Issue Jan 10, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@FLGMwt

FLGMwt commented Jan 10, 2018

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

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 10, 2018

Collaborator

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.

Collaborator

babel-bot commented Jan 10, 2018

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 comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Aug 12, 2018

Member

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

Member

loganfsmyth commented Aug 12, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment