Skip to content
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

babel-plugin-minify-dead-code-elimination: Function name gets removed when keepFnNames is enabled in some scenarios #1001

Open
mpeyper opened this issue Jan 9, 2021 · 0 comments

Comments

@mpeyper
Copy link

mpeyper commented Jan 9, 2021

Describe the bug

The name of functions that infer their names from a variable name is being removed when babel-plugin-minify-dead-code-elimination is used with the keepFnNames option enabled.

All of these function definitions hav the name "func":

function func() {}
console.log(func.name) // "func"
const other = function func() {}
console.log(other.name) // "func"
const func = function() {}
console.log(func.name) // "func"
const func = () => {}
console.log(func.name) // "func"

If we return these definitions from a wrapping function before logging the name, the first two will retain the name from their definitions:

function createFunc() {
  return function func() {}
}

const func = createFunc()
console.log(func.name) // "func"
function createFunc() {
  const other = function func() {}
  return other
}

const func = createFunc()
console.log(func.name) // "func"

However, the second two have lost their names:

function createFunc() {
  const func = function() {}
  return func
}

const func = createFunc()
console.log(func.name) // ""
function createFunc() {
  const func = () => {}
  return func;
}

const func = createFunc()
console.log(func.name) // ""

To Reproduce

Minimal code to reproduce the bug

function createFunc1() {
  return function func() {}
}

function createFunc2() {
  const other = function func() {}
  return other;
}

function createFunc3() {
  const func = function() {}
  return func;
}

function createFunc4() {
  const func = () => {}
  return func;
}

Actual Output

If there is no Error thrown,

function createFunc1() {
  return function func() {};
}

function createFunc2() {
  return function func() {};
}

function createFunc3() {
  return function () {};
}

function createFunc4() {
  return () => {};
}

Expected Output

function createFunc1() {
  return function func() {}
}

function createFunc2() {
  const other = function func() {}
  return other;
}

function createFunc3() {
  const func = function() {}
  return func;
}

function createFunc4() {
  const func = () => {}
  return func;
}

Configuration

How are you using babel-minify?

babelrc.js:

module.exports = {
  plugins: [
    [require.resolve('babel-plugin-minify-dead-code-elimination'), { keepFnName: true }]
  ]
}

Possible solution

The issue seems to be coming from inlining the variable into the return of the function, losing the variable name to infer the function name from.

Additional context

I discovered this when function names were being stripped out of stack traces in error logs.

It also seems particularly problematic for React HOCs where the displayName for the wrapping component is derived from the function name for a function component, e.g.

const withValue = (value) => (Component) => {
  const WithValue = (props) => (
    <Component {...props} value={value} />
  )
  return WithValue
}

const WrappedComponent = withValue(SomeComponent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant