0

I'm running into a strange issue that I can't seem to find in other questions.

The short version of the question is: is there any way to force Bower to install download/save modules using utf-8 encoding?

The long version: I have a file bundle that's built by webpack, and it uses the multiplication symbol (×) for a close button.

After webpack compiles everything, the chunk of code in question looks like this:

_react2['default'].createElement(
  'a',
  { className: 'pn-finalists__close-btn', onClick: clickHandler },
  '×'
)

So far so good.

The issue seems to be caused by Bower — and only intermittently. When I install from a GitHub repo using bower install --save user/repo#^0.3.2, the encoding breaks and the file downloads like so:

_react2['default'].createElement(
  'a',
  { className: 'pn-finalists__close-btn', onClick: clickHandler },
  'Ã'
)

I tried to prevent this through webpack, but I can't seem to find the part of webpack that changes × into × (I also tried \u00D7, with the same result).

But this seems like something that shouldn't be happening with Bower. I've verified that the file does not have the encoding issue on GitHub, so it's happening somewhere during bower install, unless there's an intermediate step I'm unaware of.

Has anyone seen this before? And if so, is there a way to fix this via Bower's API and/or by disabling the part of webpack that converts unicode/HTML entities into their Unicode characters?

EDIT:

The file that's breaking in transit is this one. (GitHub won't display it in a way that allows me to link to a line number, but if you search for close-btn, the issue is with the last instance of that term in the file.)

jlengstorf
  • 447
  • 1
  • 5
  • 10
  • Can you provide real name of GitHub repo? – Bob Sponge Mar 18 '16 at 07:22
  • @BobSponge I added a link to the repo/file. – jlengstorf Mar 18 '16 at 08:03
  • With bower 1.4.1 I dont have any problems with encoding. – Bob Sponge Mar 18 '16 at 09:26
  • @BobSponge I'm using v1.7.7, which is what installs from `npm install -g bower` at the moment. I can't find any issues about this in the Bower repo, so I'm fairly stumped at the moment. – jlengstorf Mar 18 '16 at 09:58
  • `×` is `Ã` when you view file in Latin-1 encoding. So, try to compare files from bower and GitHub bit by bit http://stackoverflow.com/questions/8166697/tool-for-comparing-2-binary-files-in-windows – Bob Sponge Mar 18 '16 at 12:35
  • @BobSponge Well, that's kind of what I'm trying to solve. Why is the file being viewed with Latin-1 encoding? Why is Bower downloading/saving the file with Latin-1 encoding? And, most importantly, is it possible to specify that directly somewhere? – jlengstorf Mar 19 '16 at 07:14
  • It can be simply encoding detection issue of your text editor and bower works correctly. Try to open file in other program or compare files bit by bit. If files are identical then this issue not related to bower. – Bob Sponge Mar 19 '16 at 09:40
  • @BobSponge In that case, it may be Heroku. The files download in utf-8 on my machine, but when they load in the browser (app deployed on Heroku), the encoding is borked. I'll take this to Heroku support and see if they have an option to force encoding somehow. – jlengstorf Mar 22 '16 at 04:54

1 Answers1

0

In case anyone stumbles across this in the future, it seems that each system (webpack, bower, Heroku, etc.) are laying the blame on other systems. So I wasn't able to find a real solution for this.

I did, however, find a workaround in this GitHub issue thread, which suggested replacing the entity with:

String.fromCodePoint(0x00D7)

This doesn't get converted to a utf-8 character by webpack, and therefore avoids the encoding issue altogether.

jlengstorf
  • 447
  • 1
  • 5
  • 10