Using webpack and reaction & times; becomes Ã- with minimization

Question

I use webpack.optimize.UglifyJsPlugin () to minimize the React code.

This is my rendering function.

return ( <div id='columnPicker' className='modal fade' tabIndex='-1' role='dialog'> <div className='modal-dialog modal-sm' role='document'> <div className='modal-content'> <div className='modal-header'> <button type='button' className='close' data-dismiss='modal'>&times;</button> <h4 className='modal-title'>Column Picker</h4> </div> <div className='modal-body'> <ul className='list-group'> {listItems} </ul> </div> <div className='modal-footer'> <div className='pull-right'> <button type='button' className='btn btn-sm btn-primary' data-dismiss='modal' onClick={props.onSave}>Save</button> </div> <div className='pull-right'> <button type='button' className='btn btn-link' data-dismiss='modal'>Cancel</button> </div> </div> </div> </div> </div> ); 

The close button uses & times, but when it really displays, I see

 <button type="button" class="close" data-dismiss="modal">×</button> 

If I remove webpack.optimize.UglifyJsPlugin (), it will look as expected. Does anyone know how to fix this?

Answer 1

Setting the encoding in HTML will save the correct character.

Try adding <meta charset="UTF-8"/> (or any encoding) to the meta tag in your html file.

Answer 2

I had the same problem using angular-cli (V2.4.6). In this case, the problem only occurs in production mode.

Angular-cli uses webpack internally, but does not provide access to what parameters are used in development or development mode.

Adding <meta charset="UTF-8"/> also worked for me.