React项目报错求助：Module not found及ts(6133)未读取变量问题

1. ts(6133)：'visitorName'已声明但未被读取 #

• 若确定该状态暂时无需使用，直接删除这行声明代码即可。
• 若后续业务需要用到该状态，可临时添加使用逻辑消除报错：比如在组件内加一行console.log(visitorName)，或者在JSX中渲染（如<span>当前图片：{visitorName}</span>）。
• 不建议用// @ts-ignore注释忽略错误，除非你明确知晓操作影响。

2. webpack编译报错：Module not found（无法解析'./visitors/${visitorName}'） #

这个问题有两个核心原因，对应不同解决方案：

原因1：模板字符串引号使用错误 #

你当前用的是单引号'./visitors/${visitorName}'，这种写法下${visitorName}不会被解析为变量，webpack会把整个字符串当作字面路径查找，自然找不到文件。必须改成反引号：

`./visitors/${visitorName}`

原因2：webpack静态解析模块路径的限制 #

webpack编译阶段会静态分析依赖，动态变量拼接的路径无法在编译时确定具体文件，因此报错。分场景解决：

• 场景A：访客图片是项目内提前存放的静态文件
  用require.context批量导入文件夹内的图片，示例代码：

  // 导入visitors文件夹下所有jpeg格式的图片
  const visitorImages = require.context('./visitors', false, /\.jpeg$/);
  // 使用时获取图片路径
  const imageUrl = visitorImages(`./${visitorName}`);
  

• 场景B：图片是用户上传的动态文件
  将visitors文件夹移到项目的public目录下（React项目默认自带public文件夹），然后用绝对路径访问：

  `/visitors/${visitorName}`
  

  public目录下的资源不会被webpack编译，可直接通过浏览器访问。

内容的提问来源于stack exchange，提问作者I Can Done