React人脸识别项目编译报错：模块未找到及ESLint警告求助

1. 修复变量名大小写与未使用问题 #

• 你声明的state变量是小驼峰格式的visitorName，但代码里错误使用了大写开头的VisitorName，导致两个问题：
  • 大写的VisitorName被赋值却未实际使用（触发eslint警告）
  • 真正的visitorName未被引用（悬停提示未读取）
• 把代码中所有VisitorName替换为visitorName，保证state变量被正确调用。

2. 修复模板字符串语法错误 #

eslint提示的Unexpected template string expression，是因为你将${}模板表达式放在了普通单/双引号包裹的字符串里，正确的模板字符串必须用**反引号（`）**包裹。

错误写法：

'./visitors/${VisitorName}'

正确写法：

`./visitors/${visitorName}`

3. 验证文件路径有效性 #

确认src文件夹下存在visitors子目录，且目录内包含你要引用的图片文件（比如初始的placeholder.jpeg），确保webpack能正确解析路径。

修正示例片段 #

假设原代码片段：

const [visitorName, setVisitorName] = useState('placeholder.jpeg');
// 错误路径写法
const visitorImage = './visitors/${VisitorName}';

修正后：

const [visitorName, setVisitorName] = useState('placeholder.jpeg');
// 正确模板字符串+变量名
const visitorImage = `./visitors/${visitorName}`;

完成以上修改后，所有编译错误和eslint警告都会被消除：

• 变量名统一后，visitorName被正常使用，消除未使用变量提示
• 模板字符串语法正确后，webpack能正确识别图片路径，解决模块找不到的错误
• 模板表达式的语法警告也会消失

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