Using webpack and react × becomes × with minification

Question

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'>&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 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?

Answer 1

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.