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, }, }, },
Improve this question
3
  • 1
    do comments stays if you don't use uglifyJs? Commented Jun 19, 2019 at 12:00
  • no they do not stay Commented Jun 19, 2019 at 14:30
  • 1
    so it's not about UglifyJs, it's about babelor maybe jsx transform plugin Commented Jun 19, 2019 at 15:55

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
I've filed a new issue into their github: 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
Thank you for providing so much awesome help! Adding null before the comments is great!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.