Vercel部署React项目遇react/no-unescaped-entities错误求助

报错信息 #

19:259 Error: ' can be escaped with ', ‘, ', ’. react/no-unescaped-entities.

相关代码 #

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;

问题 #

请问该错误是什么意思？如何解决？

错误解释 #

这是ESLint的react/no-unescaped-entities规则触发的报错，要求JSX文本内容里的单引号（'）必须转义。原因是单引号可能和JSX标签属性的单引号语法冲突，导致解析器混淆，引发渲染异常。本地运行正常是因为本地开发环境可能未开启严格的ESLint校验，而Vercel部署时会强制执行项目的ESLint规则。

解决方法 #

1. 转义单引号 #

找到代码中包含未转义单引号的文本，用报错提示里的转义字符替换，比如：

• 把I'm a developer改成I'm a developer（HTML实体转义）
• 或者改成I'm a developer（Unicode编码转义）

2. 更换引号包裹方式 #

如果JSX文本里有单引号，可以把包裹文本的标签属性引号换成双引号，这样文本里的单引号就不需要转义：

// 原代码（属性用单引号，文本含单引号）
<p className='text-gray-600'>I'm a developer</p>
// 修改后（属性用双引号）
<p className="text-gray-600">I'm a developer</p>

3. 临时禁用ESLint规则（不推荐） #

如果暂时找不到问题代码，可以在报错文件顶部添加注释禁用该规则：

/* eslint-disable react/no-unescaped-entities */

或者在具体行添加注释忽略：

<p className='text-gray-600'>I'm a developer {/* eslint-disable-line react/no-unescaped-entities */}</p>

注意：你提供的代码片段里没有明显的未转义单引号，可能报错来自项目中其他未粘贴的组件文件，建议全局搜索项目中的单引号文本排查。

内容的提问来源于stack exchange，提问作者Rainysky