// comments in anonymous functions break React code

[jakub-gonet]

I'm submitting a bug report

Webpack Version:
4.42.0

Babel Core Version:
7.9.0

Babel Loader Version:
8.1.0

Please tell us about your environment:
OSX 10.14

Current behavior:
After running yarn build in create-react-app following code transpiles to wrong JS code:

import React from "react";

function App() {
  return (
    <div className="App">
      <A
        render={() => (
          //test
          <B />
        )}
      />
    </div>
  );
}

const A = ({ render }) => {
  return <>{render()}</>;
};

const B = () => {
  return <p>bbbbbbb</p>;
};

export default App;

Transpiled and packed:

function App(){return/*#__PURE__*/react_default.a.createElement("div",{className:"App"},/*#__PURE__*/react_default.a.createElement(App_A,{render:function render(){return/*#__PURE__*/ //test <-----------------------
react_default.a.createElement(App_B,null);}}));}var App_A=function A(_ref){var render=_ref.render;return/*#__PURE__*/react_default.a.createElement(react_default.a.Fragment,null,render());};var App_B=function B(){return/*#__PURE__*/react_default.a.createElement("p",null,"bbbbbbb");};/* harmony default export */ var src_App = (App);

(arrow added)
render() has dangling return (line break after comment), so JS adds semicolon there - function returns undefined.

When setting compact: false in loader options this behavior isn't observed

Expected/desired behavior:

babel-loader should keep parens in arrow functions, following code is valid JS

x = () => (
// TEST
5
);

• Minimal demo
  Here's ejected react-create-app with reproduction
  https://github.com/jakub-gonet/babel-loader-comment-bug

Run yarn build && serve -s build (assuming serve is installed)

When changing compact to false in webpack.config.js#351 it works correctly

EDIT:

function App() {
  return (
    <div className="App">
      {(() => (
        //test
        <span>test</span>
      ))()}
    </div>
  );
}

also reproduces this issue.

[babel-bot]

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

Simpler reproduction:

const code = `
function f() {
  return (
    /*#__PURE__*/
    //test
    0
  );
}
`;

const out = generator(parser.parse(code), {
  compact: true,
});

console.log(out.code);