React: nbsp renders differently in production

[StokeMasterJack]

I am using {'\u00a0'} in my render method like so:

var Hello = React.createClass({
  render: function() {
    return <div><input/>{'\u00a0'}{name}</div>;
  }
});

It renders as expected in dev mode. But in production it renders with a strange A. See attacked images.

This is Dev Mode:

This is Prod Mode (notice the strange A):

I am using React 15.3.2.

[StokeMasterJack]

I have narrowed the problem down a bit. When I build with this option set:

devtool: 'eval-source-map', //dev-mode

it renders fine. But when I render instead with this:

devtool: 'cheap-module-source-map', //prod-mode

it adds the extra funky A character.

Does this mean this is a web pack bug? I have to say it's sometimes hard to determine where React ends and web pack starts.

[aweary]

Does this mean this is a web pack bug?

Can you reproduce the issue without React? If changing devtool is what causes the issue then it's likely a Webpack issue, but you can always verify by creating a small bundle with plain JavaScript files and see if occurs there as well.

[StokeMasterJack]

Looks like someone reported the same issue for webpack:
https://github.com/webpack/compression-webpack-plugin/issues/20

[zpao]

Looks like this isn't a React issue, so closing out. Feel free to reopen if I'm wrong.

[StokeMasterJack]

Yes. I agree. Though I never quite solved it (on the webpack side). The bottom line is that webpack was spitting out something different in dev mode then it was in prod mode. I ended up fixing the issue by adding charset=”utf-8" to my script tag:

<script 
  type=”text/javascript” 
  src=”/build/bundle.js” 
  charset=”utf-8">
</script>

Also, wrote a blog post about it.

[vijayst]

@StokeMasterJack I did not get lucky with the charset="utf-8" fix. Webpack still spits the A. Thanks anyway.