DEV Community

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

Posted on

3 1 1

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;
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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more