Deployment Problems with Vercel

[jessicareinh]

Hello,

we are currently working on our feature branch and started a pull request. Now Vercel is giving us an error message. We hat merge conflicts before and resolved them. Maybe this is a corresponding issue?!

I have committed and pushed my current status. [It is accessible at this link.](https://github.com/orgs/neuefische/discussions/738#example-link-to-your-repo) The branch is called "myEvent".

Description of the error:
How can one reproduce the error?

The error message is displayed in the browser immediately upon starting the Development Server.
Where and when does it occur?
Right when starting the Development Server.
What is expected, what happens?
I expect my App to be deployed properly instead I get an instant error message.

ERROR

--

11:35:09.235 |  Failed to compile
11:35:09.235 | ./components/MyEventsList/index.js
11:35:09.235 | 35:48 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities
11:35:09.235 |  
11:35:09.235 | info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
11:35:09.255 | Error: Command "npm run build" exited with 1

What have I already tried:
I have already searched online for this error and I tried using methods from the suggested link. Still nothing works.

Thank you for your help!

[JessicaLoers]

The error you're encountering is from ESLint, specifically from the react/no-unescaped-entities rule. 👮

💡 This rule prevents characters that might be considered as part of HTML entities from being used unescaped in JSX strings. In your case, the apostrophe in "haven't" is causing the issue.

To solve this problem, you can escape the apostrophe in your JSX code. There are several ways to do this. Any of these methods will prevent the ESLint error by ensuring that the apostrophe is correctly escaped or not interpreted as an unescaped entity in JSX.

1. HTML Entity: Replace the apostrophe with its corresponding HTML entity. For an apostrophe, you can use &apos; or &#39;.
   Example with &apos

<p>You haven&apos;t added any events yet</p>

2. JavaScript String: Use a JavaScript string for the text, which allows you to include the apostrophe without escaping it.

<p>{'You haven\'t added any events yet'}</p>

3. Template Literal: Similar to a JavaScript string, but using backticks. This is especially useful for longer texts or when you want to embed expressions.

<p>{`You haven't added any events yet`}</p>

💡 By the way.
You can run the build process locally using npm run build. It simulates part of what happens during a deployment on platforms like Vercel, but it doesn't fully replicate the entire deployment and hosting environment. It gives you a good indication of how your application will behave once deployed.