旧React项目编译报错：Module not found问题求助

问题分析 #

编译报错提示无法解析/background.jpg，核心原因是CSS中使用的根绝对路径不符合Create React App（CRA）的静态资源查找规则：CRA会从项目根目录解析绝对路径，但实际图片文件并未放在对应位置，导致打包时无法定位文件。

修复步骤 #

1. 修正CSS中的图片引用路径 #

先确认background.jpg的实际存放位置，对应调整路径：

• 如果图片在src目录下（比如src/background.jpg），把绝对路径改成相对路径：

  /* 原代码 */
  background-image: url('/background.jpg');
  /* 修改后 */
  background-image: url('./background.jpg');
  

• 如果图片在public目录下（CRA推荐的静态资源存放位置），确保文件确实在public根目录，此时绝对路径/background.jpg会被正确解析，无需修改路径。

2. 改用组件内引入图片的方式 #

如果CSS路径修改无效，可尝试在React组件中直接引入图片，再通过内联样式绑定：

import background from './background.jpg';

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      {/* 组件内容 */}
    </div>
  );
}

3. 清理缓存后重新编译 #

执行以下命令彻底清理缓存并重装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm start

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