React项目Parcel打包时Material UI TextField占位符ñ字符渲染异常

问题原因 #

这是Parcel 2.0.0-rc.0版本的已知bug，该版本对JSX标签属性中直接写入的非ASCII字符转义逻辑存在异常，会将ñ这类特殊字符转成乱码，和你配置的UTF-8元标签、Material UI的TextField组件本身没有关系。

可使用的解决方案 #

• 方案1：升级Parcel到2.0.0及以上正式稳定版，该版本之后官方已经修复了这个字符转义问题，升级后直接写入Contraseña即可正常渲染。
• 方案2：如果暂时不方便升级Parcel，可将ñ替换为对应的HTML实体编码，把属性值改为placeholder="Contraseña"，浏览器会自动将实体编码解析为正常的ñ字符。
• 方案3：将占位符文本抽离为单独的变量再传入组件，示例如下：

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

const rootElement = document.getElementById("root");
// 抽离为变量
const placeholderText = "Contraseña";

ReactDOM.render(
  <StrictMode>
    <TextField color="secondary" margin="none" placeholder={placeholderText} />
  </StrictMode>,
  rootElement
);

Parcel对变量中存储的特殊字符不会触发这个转义bug，可以正常渲染。

问题现象截图 #

内容的提问来源于stack exchange，提问作者Mateo Lara