19：259 错误：""可以使用""、""进行转义。反应/无未转义实体

Question

我正试图使用vercel将我的项目部署到云中，但中途显示了一条错误消息：19:259错误：'可以用'、‘、'、’转义。react/no unscaped实体。

About.jsx代码：

import React from 'react';
import Image from 'next/image';
import AboutImg from '../public/assets/about.png';

const About = () => {
return (
<div id='about' className='w-full md:h-screen p-2 flex items-center py-16'>
<div className='max-w-[1240px] m-auto md:grid grid-cols-3 gap-8'>
<div className='col-span-2'>
<p className='uppercase text-xl tracking-widest text-[#5651e5]'>
About Me
</p>
<h2 className='py-4'>Who I Am?</h2>
<p className='py-2 text-gray-600'>
/ / I am not your average developer
</p>
<p className='py-2 text-gray-600'>
test
</p>


<a href='/../public/assets/about.png'>
<p className='py-2 text-gray-600 underline cursor-pointer'>
Download file
</p>
</a>
</div>
<div className='w-full h-auto m-auto shadow-xl shadow-gray-400 rounded-xl flex items-center justify-center p-4 hover:scale-105 ease-in duration-300'>
<Image src={AboutImg} className='rounded-xl' alt='/' />
</div>
</div>
</div>
);
};
export default About;

skills.jsx:

import Image from 'next/image';
import React from 'react';
import { AiFillHtml5 } from "react-icons/Ai";
import { DiCss3 } from "react-icons/Di";
import { DiPython } from "react-icons/Di";
import { AiFillGithub } from "react-icons/Ai";
import { TbBrandNextjs } from "react-icons/Tb";
import { DiDjango } from "react-icons/Di";
import { SiTailwindcss } from "react-icons/Si";
import { FaDocker } from "react-icons/Fa";
const Skills = () => {
return (
<div id='skills' className='w-full lg:h-screen p-2'>
<div className='max-w-[1240px] mx-auto flex flex-col justify-center h-full'>
<p className='text-xl tracking-widest uppercase text-[#5651e5]'>
My Skills
</p>
<h2 className='py-4'>What I Can Do?</h2>

<div className='grid grid-cols-2 lg:grid-cols-4 gap-8'>
<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<AiFillHtml5 className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>HTML</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<DiCss3 className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>CSS</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<DiPython className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>Python</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<DiDjango className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>Django</h3>
</div>
</div>
</div>


<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<SiTailwindcss className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>Tailwind CSS</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<FaDocker className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>Docker</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<AiFillGithub className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>Github</h3>
</div>
</div>
</div>

<div className='p-6 shadow-xl rounded-xl hover:scale-10 ease-in duration-300'>
<div className='grid grid-cols-2 justify-center items-center'>
<TbBrandNextjs className="w-10 h-10 bg-blue-400 text-gray-100 m-3 p-1 shadow-xl rounded-md" />
<div>
<h3>NextJs</h3>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Skills;

这个错误意味着什么？我该如何解决这个问题？当我在localhost上运行时，我没有问题，只是部署有这个错误问题。

Answer 1

我得到了同样的错误，它指向我的代码，我在代码中添加了一个类似的简单文本

<p>dont't have a account?</p>

我设法通过在模板文字中提取文本来修复它

<p>{`dont't have a account?`}</p>

你也可以做一些类似的事情

<p>{`dont&apos;t have a account?`}</p>

Answer 2

此错误是由nextjs规则引起的。

要禁用此功能，请转到.eslintrc.json文件，并在扩展键的正下方添加规则

即。你的.eslintrc.json在下面会是这样

{
"extends": "next/core-web-vitals",
"rules": {
"react/no-unescaped-entities": "off"
}
}

尝试重新构建

有关更多信息，请访问https://nextjs.org/docs/pages/building-your-application/configuring/eslint#disabling-规则

Answer 3

我遇到了同样的问题而不是

<p>Enter leader's name</p>

尝试

<p>{`Enter leader's name`}</p>