Docker Compose启动React应用报错：找不到@rollup/rollup-linux-x64-musl模块

问题现象 #

本地及docker run命令启动React应用均正常，但使用docker-compose up启动时出现依赖缺失报错，提示找不到@rollup/rollup-linux-x64-musl模块，同时提示npm可选依赖存在Bug，需删除package-lock.json和node_modules后重新执行npm i。

报错详情 #

frontend-1  | failed to load config from /app/vite.config.ts
frontend-1  | error when starting dev server:
frontend-1  | Error: Cannot find module @rollup/rollup-linux-x64-musl. npm has a bug related to optional dependencies. Please try `npm i` again after removing both package-lock.json and node_modules directory.
frontend-1  |     at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:59:9)
frontend-1  |     at Object.<anonymous> (/app/node_modules/rollup/dist/native.js:68:76)
frontend-1  |     at Module._compile (node:internal/modules/cjs/loader:1368:14)
frontend-1  |     at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
frontend-1  |     at Module.load (node:internal/modules/cjs/loader:1205:32)
frontend-1  |     at Module._load (node:internal/modules/cjs/loader:1021:12)
frontend-1  |     at cjsLoader (node:internal/modules/esm/translators:366:17)
frontend-1  |     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
frontend-1  |     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
frontend-1  |     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
frontend-1 exited with code 1

现有配置 #

Dockerfile #

FROM node:21-alpine

RUN npm install -g vite

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 5173

CMD ["vite", "--host", "0.0.0.0"]

docker-compose.yml #

version: '3.8'

services:
  reactApp:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    ports:
      - "9000:5173"

.dockerignore #

node_modules
package-lock.json

问题根源 #

Docker Compose的卷挂载- .:/app会将本地目录完全覆盖容器内的/app目录，导致容器构建时安装的适配Alpine（musl架构）的node_modules被本地（可能是glibc架构）的node_modules覆盖，从而出现架构不兼容的依赖缺失问题。

解决方案 #

1. 修改docker-compose.yml，排除node_modules目录挂载
   在卷配置中添加- /app/node_modules，避免本地文件覆盖容器内的依赖：

   version: '3.8'
   
   services:
     reactApp:
       build:
         context: .
         dockerfile: Dockerfile
       volumes:
         - .:/app
         - /app/node_modules  # 保留容器内的node_modules，不被本地覆盖
       ports:
         - "9000:5173"
   

2. 重新构建镜像
   执行命令：

   docker-compose build --no-cache
   

3. 启动服务

   docker-compose up
   

备选方案（开发场景） #

如果需要在开发时实时同步代码并保留依赖安装能力，可以在docker-compose的command中添加依赖安装步骤（不推荐生产环境使用）：

services:
  reactApp:
    # ...其他配置
    command: sh -c "npm install && vite --host 0.0.0.0"

内容的提问来源于stack exchange，提问作者ÙNKNÒWÐ