Search code examples
htmlreactjsmaterial-uibundlerparceljs

React project is not displaying text as I intend

I am using Material UI TextInput component with a placeholder prop that passes the text "Contraseña"; The letter ñ in the word is not rendering as intended, but as \fx1. The HTLM header have meta UTF-8 and I am using parcel 2.0.0-rc.0 as my bundler

enter image description here

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="APP"
      content="web site created using react"
    />
    <script src="~/src/index.js" type="module"></script>
    <title>App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

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

const rootElement = document.getElementById("root");

ReactDOM.render(
  <StrictMode>
    <TextField color="secondary" margin="none" placeholder="Contraseña" />
  </StrictMode>,
  rootElement
);
Solution

  • The problem seems to be related to the use of Parcel 2 RC (Bug report). It is important to notice that the bad encoding occurs only in attribute values; a temporary solution is to put brackets around the string attribute value:

    <TextField color="secondary" margin="none" placeholder={"Contraseña"} />