DEV Community

Cover image for Next.js Failed to compile Deploying to Vercel
Robiul
Robiul

Posted on

Next.js Failed to compile Deploying to Vercel

#nextjs #javascript #webdev

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;
Enter fullscreen mode Exit fullscreen mode

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,
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
shricodev profile image
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"
  },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
robiulman profile image
Robiul • • Edited

Much appreciate it.

Read next

elidvenega profile image

Svelte Counter I made to understand runes

Elid -

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -

soheilyr profile image

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Soheil yazdanyar -

biswajitfsd profile image

Mastering REST API Best Practices in Python 🐍

Biswajit Patra -