Docker部署React网站遇模块找不到错误求助

问题重现 #

在Windows环境开发React项目，部署到Microsoft Azure的Linux Docker容器时，构建镜像出现错误：

Module not found: Error: Can't resolve './components/Home' in '/app/src'

本地通过yarn && yarn start或yarn && yarn run build && serve -s build运行完全正常，将Home.js移至src根目录后容器也能正常运行，但不想打乱现有目录结构，且已多次排查路径大小写问题。

项目文件结构：

├ src/
 | ├── index.js
 | ├── App.js
 | └── components/
 |     └─── Home.js
 ├ public/
 ├ Dockerfile
 ├ package.json
 └ yarn.lock

排查与解决方案 #

1. 验证容器内文件结构是否正确 #

Windows文件系统不区分大小写且目录复制逻辑和Linux有差异，先确认Docker容器内是否正确复制了components目录及文件：

• 临时修改Dockerfile，在RUN yarn run build前添加一行：

  RUN ls -la /app/src/components
  

  重新构建镜像，查看输出是否显示Home.js，确认文件是否被正确复制。
• 或者构建完成后，运行临时容器进入查看：

  docker run -it --rm <你的镜像ID> sh
  cd /app/src/components
  ls
  

2. 调整Dockerfile的COPY命令写法 #

Windows下直接使用COPY src /app/src可能存在子目录复制不完整的情况，修改为递归复制的写法：

COPY ./src/ /app/src/
COPY ./public/ /app/public/

确保src下的所有子目录和文件都被完整复制到容器内的/app/src路径。

3. 临时替换Lazy Import为普通导入 #

动态导入（lazy loading）在跨平台环境下可能存在路径解析差异，先替换为普通导入测试：
将App.js中的：

const Home = lazy(() => import("./components/Home"));

改为：

import Home from "./components/Home";

重新构建镜像，如果构建成功，说明问题出在动态导入的路径解析上，可以尝试给动态导入添加完整文件名后缀：

const Home = lazy(() => import("./components/Home.js"));

4. 对齐本地与容器的Node版本 #

如果本地使用的Node版本和Docker镜像中的node:18-alpine不一致，可能导致依赖安装或构建时的路径解析差异。将Dockerfile的基础镜像改为和本地一致的版本，比如本地是Node 16：

FROM node:16-alpine

5. 清理Docker构建缓存 #

Docker的构建缓存可能导致旧的文件结构残留，强制清理缓存后重新构建：

docker build --no-cache -t <你的镜像名> .

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