2

I have the following JSX in a React app:

render() {
  return (
    <div>
      {/* A JSX comment */}
    </div>
  )
}

I am using webpack to compile and minify the code.

In my webpack plugins I am using UglifyJsPlugin to try and keep the comments:

new webpack.optimize.UglifyJsPlugin( {
    compress: {
        warnings: false,
        // Disabled because of an issue with Uglify breaking seemingly valid code:
        // https://github.com/facebookincubator/create-react-app/issues/2376
        // Pending further investigation:
        // https://github.com/mishoo/UglifyJS2/issues/2011
        comparisons: false,
    },
    mangle: {
        safari10: true,
        except: ['__', '_n', '_x', '_nx' ],
    },
    output: {
        comments: true,
        // Turned on because emoji and regex is not minified properly using default
        // https://github.com/facebookincubator/create-react-app/issues/2488
        ascii_only: true,
    },
    extractComments: false,
    sourceMap: shouldUseSourceMap,
} ),

comments:true is preserving some comments from React but my comment from JSX /* A JSX comment */, is being stripped from the minified code. How can I prevent that comment from being stripped out of the minified/production code?

Also my Babel module rule with comments turned on:

{
    test: /\.(js|jsx|mjs)$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            // @remove-on-eject-begin
            babelrc: false,
            presets: [ require.resolve( 'babel-preset-cgb' ) ],
            // @remove-on-eject-end
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: false,
            comments: true,
        },
    },
},
CyberJunkie
  • 21,596
  • 59
  • 148
  • 215

1 Answers1

3

I dived into Babel's repo and find a bug reported

How to preserve jsx comment after babel transform #7153

it has been fixed last year and fix came into 7.0.0-beta.37. so if that feature is really important to you you have to bump Babel's version.

[UPD] I believe it's just a edge case for bug mentioned above.

As we can see at online sandbox your code is transpiled into

render() {
  return React.createElement("div", null);
}

but once I put at least explicit null:

render() {
  return (
    <div>
      {null/* A JSX comment */}
    </div>
  )
}

it will not strip comments:

render() {
  return React.createElement("div", null, null
  /* A JSX comment */
  );
}

So comments are stripped only if there are no other tokens in the same block.

since older bug has been closed forever I've put new one #10118 so whoever found this topic looking for a solution better check this ticket for updates

skyboyer
  • 22,209
  • 7
  • 57
  • 64
  • Thanks for the answer @skyboyer! I am using Babel 7 but the comments are still stripped. I also added my Babel webpack config to my question and have comments set to true there too. – CyberJunkie Jun 20 '19 at 17:08
  • I've filed a new issue into their github: https://github.com/babel/babel/issues/10118 could you please comment there why is it needed at all so they may take into account while triaging – skyboyer Jun 22 '19 at 10:28
  • Thank you for providing so much awesome help! Adding `null` before the comments is great! – CyberJunkie Jun 22 '19 at 11:37