Docker构建React应用报错：TypeError: Cannot read properties of undefined (reading 'Descendant')

以下是针对你遇到的问题的排查和解决步骤：

第一步：获取完整错误日志 #

首先要明确具体的错误信息，执行以下命令获取完整构建日志：

docker build -t image . 2>&1 | tee build.log

查看日志中的具体报错，这是定位问题的核心依据。

常见解决方案 #

1. 清理Docker构建缓存后重新构建 #

Docker会缓存每一步构建结果，旧的依赖缓存可能导致异常，强制重新构建：

docker build --no-cache -t image .

2. 配置.dockerignore排除干扰文件 #

确保本地的冗余文件不会被复制到容器中，在项目根目录创建.dockerignore文件：

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

3. 检查环境变量是否齐全 #

React构建时可能依赖REACT_APP_*开头的环境变量，本地通过.env配置但容器中缺失会导致构建失败：

• 直接在Dockerfile中添加环境变量：

  ENV REACT_APP_API_URL=http://your-api-address
  

• 或者构建时通过参数传入：

  docker build --build-arg REACT_APP_API_URL=http://your-api-address -t image .
  

4. 调整容器内用户权限 #

容器默认以root用户运行，部分项目依赖可能因权限问题无法写入文件，切换到node用户执行构建：
修改Dockerfile，在创建/app目录后添加：

RUN chown -R node:node /app
USER node

后续的COPY、npm install、npm run build都会以node用户执行。

5. 验证Node版本与依赖兼容性 #

对比本地Node版本与Docker镜像中的版本是否一致：

• 本地执行：node -v
• 容器中执行：docker run --rm node:16.13.0 node -v
  如果本地版本更高，尝试升级Docker镜像的Node版本（比如node:18-alpine），同时检查package.json中依赖的兼容性。

6. 优化Dockerfile构建步骤 #

调整步骤顺序，利用缓存减少重复操作，同时避免权限问题：

FROM node:16.13.0 as build

# 安装mosquitto客户端并创建脚本（缓存层，很少变化）
RUN apt-get update -y && apt-get install mosquitto-clients -y && rm -rf /var/lib/apt/lists/*

RUN echo 'mosquitto_pub -t watchtower/update/dashboard -h mosquitto -p 1883 -m "{status: checking, service: Dashboard}"' > pre-check.sh && chmod +rx pre-check.sh 
RUN echo 'mosquitto_pub -t watchtower/update/dashboard -h mosquitto -p 1883 -m "{status: updating, service: Dashboard}"' > pre-update.sh && chmod +rx pre-update.sh   
RUN echo 'mosquitto_pub -t watchtower/update/dashboard -h mosquitto -p 1883 -m "{status: updated, service: Dashboard}"' > post-update.sh && chmod +rx post-update.sh 
RUN echo 'mosquitto_pub -t watchtower/update/dashboard -h mosquitto -p 1883 -m "{status: checked, service: Dashboard}"' > post-check.sh && chmod +rx post-check.sh

LABEL com.centurylinklabs.watchtower.lifecycle.pre-check="/pre-check.sh"
LABEL com.centurylinklabs.watchtower.lifecycle.pre-update="/pre-update.sh"
LABEL com.centurylinklabs.watchtower.lifecycle.post-update="/post-update.sh"
LABEL com.centurylinklabs.watchtower.lifecycle.post-check="/post-check.sh"

# 创建目录并切换到node用户
RUN mkdir /app && chown -R node:node /app
USER node
WORKDIR /app

# 先复制依赖配置文件，利用缓存
COPY --chown=node:node /front-end/package*.json ./

RUN npm install

# 复制项目源码
COPY --chown=node:node ./front-end/ ./

RUN npm run build

RUN npm install -g serve

CMD serve -s build
EXPOSE 5000

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