Parcel: HTML unicode gets turned into the actual symbols in the generated JS

[fnick851]

🐛 bug report

I am using Parcel to build Vue files into JS. A pretty normal vue set up with minimal configuration. In the compiled JS. unicode such as \’ or \’ got turned in to the actual symbol " ’ " (a curly quote here it is). And browser cannot display this correctly. It needs unicode. (e.g. in the compiled JS, curly quote should be \’ or \’ for HTML to display them correctly!) Why Parcel transforms those? How to disable this behavior? Basically I need to preserve the unicode.

🎛 Configuration (.babelrc, package.json, cli command)

package.json
{ "name": "pisaweb", "version": "1.0.0", "description": "", "scripts": { "dev": "parcel watch src/app.html -d ../src/surveys/pisa/pisa2018/app --public-url ./app", "build": "parcel build src/app.html -d ../src/surveys/pisa/pisa2018/app --public-url ./app --no-content-hash" }, "author": "", "dependencies": { "core-js": "^2.6.9", "views": "^1.0.2", "vue": "^2.6.10", "vue-router": "^3.1.2" }, "devDependencies": { "parcel-bundler": "^1.12.3", "@babel/core": "^7.5.5", "@vue/component-compiler-utils": "^3.0.0", "vue-template-compiler": "^2.6.10", "vue-hot-reload-api": "^2.3.3" } }

🤔 Expected Behavior

Do not transform unicode, preserve them.

😯 Current Behavior

Unicode for curly quote got transformed into actual symbol and HTML cannot display them correctly.

💁 Possible Solution

N/A

🔦 Context

Clients want curly quotation marks for everything. So I need to use unicode. Can't just type the one on the keyboard.

💻 Code Sample

<p>measure students\&#8217; ability to engage</p> <p>measure students\& rsquo; ability to engage</p>
unicode should be preserved.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.3
| Node | 12.8.1
| npm/Yarn | npm 6.10.2
| Operating System | Win10

[fnick851]

I forgot to set char encoding in HTML

[daf]

This tripped me up for a while as well. I had a × in a React component, that on production builds, was showing up as a pair of nonsense characters. Searching the issues for "HTML Entity" or similar didn't lead me anywhere, but as I was filing an issue, the "related search" pointed me here, and sure enough things are solved by adding a <meta charset="utf-8">.

I was also able to skirt the issue in my component by replacing × with {String.fromCharCode(215)} - although I certainly didn't like this as it wasn't very obvious.

This comment is mostly for future searchers for entities.