I'm using webpack.optimize.UglifyJsPlugin() to minify my React code.
This is my render 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'>×</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 × but when it actually renders I see
<button type="button" class="close" data-dismiss="modal">×</button>
If I remove webpack.optimize.UglifyJsPlugin() it renders as one would expect. Does anyone know how to fix this?
Specifying the charset in the HTML will preserve the correct character.
Try adding <meta charset="UTF-8"/> (or whatever charset) to the meta tag on your html file.
I've just had the same issue using angular-cli (V2.4.6). In this case the problem only happens in production mode.
Angular-cli uses webpack internally but provides no access to which options are used in production vs development mode.
Adding
<meta charset="UTF-8"/>
also worked for me.