I've been trying to deploy my airbnb clone I built so far and for some reason it is not working properly due to the error mentioned above. I tried to change the quotation marks because it looked that's what's meant, but it didn't have any effect, just as I expected. Here is the output I get when I run the build on Vercel. It seems to have something to do with the Banner.js component. I'll link the repository here too in case someone needs to take a look at it. https://github.com/fabioc1101/airbnb
[12:32:00.719] Cloning github.com/fabioc1101/airbnb (Branch: main, Commit: 6f8f6d1)
[12:32:00.977] Cloning completed: 257.557ms
[12:32:01.983] No Build Cache available
[12:32:02.014] Running "vercel build"
[12:32:02.499] Vercel CLI 28.2.2
[12:32:02.770] Installing dependencies...
[12:32:11.028]
[12:32:11.029] added 272 packages in 8s
[12:32:11.029]
[12:32:11.029] 85 packages are looking for funding
[12:32:11.029] run `npm fund` for details
[12:32:11.046] Detected Next.js version: 12.2.5
[12:32:11.050] Detected `package-lock.json` generated by npm 7+...
[12:32:11.050] Running "npm run build"
[12:32:11.343]
[12:32:11.343] > airbnb@0.1.0 build
[12:32:11.344] > next build
[12:32:11.344]
[12:32:11.798] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[12:32:11.798] This information is used to shape Next.js' roadmap and prioritize features.
[12:32:11.798] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[12:32:11.798] https://nextjs.org/telemetry
[12:32:11.799]
[12:32:11.899] info - Linting and checking validity of types...
[12:32:13.679]
[12:32:13.680] Failed to compile.
[12:32:13.680]
[12:32:13.680] ./components/Banner.js
[12:32:13.680] 15:160 Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities
[12:32:13.680]
[12:32:13.680] info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
[12:32:13.691] Error: Command "npm run build" exited with 1
Here is the banner component code:
import React from 'react'
import Image from 'next/image'
function Banner() {
return (
<div className='relative h-[300px] sm:h-[400px] lg:h-[450px] xl:h-[600px]'>
<Image
src="https://links.papareact.com/0fm"
layout='fill'
objectFit='cover'
alt=''
/>
<div className='absolute top-1/2 w-full text-center'>
<p className='text-sm sm:text-lg'>Not sure where to go?</p>
<button className='text-purple-500 bg-white px-10 py-4 shadow-md rounded-full font-bold my-3 hover:shadow-xl active:scale-90 transition duration-150'>I'm flexible</button>
</div>
</div>
)
}
export default Banner
