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


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


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

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

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


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"} />