Docker部署React应用时node_modules模块导入报错求助

问题根源 #

这个错误来自Create React App（CRA）的默认webpack配置——它限制仅允许从src/目录内部导入模块，而react-refresh的导入路径触发了该限制。Docker构建时最常见的诱因是本地node_modules被意外复制到容器内，导致CRA的模块解析逻辑出现混乱。

修复方案 #

1. 配置.dockerignore文件 #

确保项目根目录存在.dockerignore文件，添加以下内容，避免把本地依赖和无关文件复制到容器中：

node_modules
npm-debug.log
.git
.gitignore
.env
build

2. 优化Dockerfile构建逻辑 #

原Dockerfile框架没问题，可添加缓存优化并确保容器内依赖干净：

FROM node:18.13.0
WORKDIR /app
# 先复制package相关文件，复用Docker缓存层
COPY package*.json ./
# 生产环境用npm ci更稳定，开发环境可替换为npm install
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

3. 彻底清理后重新构建 #

如果之前的构建缓存残留问题，执行以下命令重置后重新构建：

# 停止并移除旧容器
docker stop frontend-container
docker rm frontend-container
# 删除旧镜像
docker rmi frontend-image
# 强制不使用缓存重新构建
docker build --no-cache -t frontend-image .
# 重新启动容器（映射端口方便本地访问）
docker run -d --name frontend-container -p 3000:3000 frontend-image

4. 开发环境热重载特殊处理 #

如果是开发环境需要挂载本地代码实现热重载，要避免本地node_modules干扰容器内依赖：

docker run -d --name frontend-container -p 3000:3000 -v $(pwd)/src:/app/src -v /app/node_modules frontend-image

这里/app/node_modules是匿名卷，强制使用容器内安装的依赖，规避本地依赖的解析冲突。

验证 #

重新运行后，查看容器日志确认错误是否消失：

docker logs frontend-container

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