If you are getting the errors below while deploying on Vercel.
Error:”can be escaped with”,“,”,”. react/no-unescaped-entities
If any JSX files have some of the text with “ or ‘. that file linter shows errors.
const Example = () => {
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly “5 Things I’m Digging“ emails</p>
</div>
)}
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly “5 Things I’m Digging“ emails</p>
</div>
)}
export default Example;
Now we can solve this issue with several options:
Bad practice: Remember don’t suppress linter like below.
//eslint.json
{
“rules“: {
“react/no-unescaped-entities“: 0,
}
}
{
“rules“: {
“react/no-unescaped-entities“: 0,
}
}
Good Practice: Escape HTML or {} Embedding Expressions with Template literals wrap in JSX.
List of the Escape HTML Characters.
const Example = () => {
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly {`”5 Things I’m Digging”`} emails</p>
</div>
)}
export default Example;
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly {`”5 Things I’m Digging”`} emails</p>
</div>
)}
export default Example;
or
const Example = () => {
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly "5 Things I'm Digging" emails</p>
</div>
)}
export default Example;
return (
<div >
<p> Sign up for new product drops, behind–the–scenes
content, and monthly "5 Things I'm Digging" emails</p>
</div>
)}
export default Example;