Next.js Failed to compile Deploying to Vercel

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>
  )}

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,
  }
}

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;

or

const Example = () => {
  return (
    <div >
       <p>  Sign up for new product drops, behind-the-scenes 
          content, and monthly &quot;5 Things I&apos;m Digging&quot; emails</p>
      </div>
  )}
export default Example;

Comments

[Shrijal Acharya]

Before attempting to deploy the application with NextJS, ensure that you first run the linter in your dev env. This will detect any such errors right away and save you a lot of time.

Run pnpm run lint and ensure you have the lint command in your package.json. Update the package manager name accordingly.

  "scripts": {
    ...,
    "lint": "next lint"
  },

[Robiul]

Much appreciate it.