Docker容器在React代码变更后无法自动重启问题求助

在2023款MacBook Pro上配置Docker容器运行React项目时，出现本地文件变更后容器自动重新编译功能极少生效的问题，且无明确失效规律；使用完全相同容器配置的其他团队成员未遇到此问题。相关Docker Compose配置如下：

frontend:
    image: frontend
    profiles:
      - default
      - dev
      - prod
    build:
      context: ./
      dockerfile: ./docker-build/frontend/Dockerfile
    environment:
      WATCHPACK_POLLING: "true"
      PORT: 80
      ENVIRONMENT: ${ENVIRONMENT}
    volumes:
      - ./frontend:/app:rw
    container_name: frontend
    restart: always
    #ports:
    # - "127.0.0.1:3000:3000"

解决步骤 #

针对该问题，可通过以下两种方式解决：

方式一：调整Docker Desktop虚拟化设置 #

1. 打开Docker Desktop，进入「设置」页面
2. 切换到「开发功能」选项卡
3. 取消勾选「使用新的虚拟化框架」选项
4. 重启Docker Desktop后重新启动容器，测试文件变更监听功能

方式二：补充CHOKIDAR环境变量 #

React项目（尤其是create-react-app创建的项目）默认使用chokidar工具监听文件变更，仅设置WATCHPACK_POLLING可能无法覆盖所有监听场景，需添加对应的环境变量：

修改Docker Compose的environment段，新增CHOKIDAR_USEPOLLING配置：

environment:
  WATCHPACK_POLLING: "true"
  CHOKIDAR_USEPOLLING: "true"
  PORT: 80
  ENVIRONMENT: ${ENVIRONMENT}

也可以直接在项目的package.json启动脚本中加入该变量：

"scripts": {
  "start": "CHOKIDAR_USEPOLLING=true react-scripts start"
}

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