Docker-Compose部署Nuxt.js前端时出现ERR_REQUIRE_ESM错误

环境与问题描述 #

本地运行Nuxt.js前端和FastAPI后端均正常，但执行docker-compose up时，FastAPI正常启动，Nuxt.js容器抛出以下错误：

Nuxt-frontend  | > @ start /front
Nuxt-frontend  | > nuxt start
Nuxt-frontend  |
Nuxt-frontend  | internal/modules/cjs/loader.js:975
Nuxt-frontend  |     throw new ERR_REQUIRE_ESM(filename);
Nuxt-frontend  |     ^
Nuxt-frontend  |
Nuxt-frontend  | Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /front/node_modules/nuxt/bin/nuxt.mjs
Nuxt-frontend  |     at Module.load (internal/modules/cjs/loader.js:975:11)
Nuxt-frontend  |     at Function.Module._load (internal/modules/cjs/loader.js:877:14)
Nuxt-frontend  |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
Nuxt-frontend  |     at internal/main/run_main_module.js:18:47 {
Nuxt-frontend  |   code: 'ERR_REQUIRE_ESM'
Nuxt-frontend  | }
Nuxt-frontend  | npm ERR! code ELIFECYCLE
Nuxt-frontend  | npm ERR! errno 1
Nuxt-frontend  | npm ERR! @ start: `nuxt start`
Nuxt-frontend  | npm ERR! Exit status 1

相关文件结构：

├── Dockerfile -- FastAPI docker file
├── docker-compose.yml 
└── front
    ├── Dockerfile -- Nuxt docker file

Nuxt的Dockerfile原内容：

FROM node:12.16.3-alpine3.9

# Create destination
RUN mkdir -p /front
WORKDIR /front


#compile app
COPY package.json .
COPY package-lock.json .

RUN npm install

COPY . .
RUN npm build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "npm","run", "start" ]

.dockerignore原内容：

node_modules
npm-debug*
.nuxt
dist
tests
.output

docker-compose.yml原内容：

version: '2'
services:
    app:
        build: .
        container_name: FastAPI
        command: uvicorn app.main:app --host 0.0.0.0
        ports:
            - 8000:8000
    front:
        build: ./front
        container_name: Nuxt-frontend
        command: npm start
        ports:
            - 3000:3000 

注：已尝试在package.json中添加"type": "module"，问题未解决。

解决方案 #

1. 升级Node.js基础镜像版本 #

Node.js 12.x对ES模块（.mjs）的支持不完善，而高版本Nuxt（尤其是Nuxt3）的启动脚本为ES模块格式，必须使用支持ES模块的Node版本（建议16.x及以上）。修改Nuxt的Dockerfile基础镜像：

# 替换为高版本Node镜像，比如18-alpine
FROM node:18-alpine3.18

2. 调整Nuxt启动命令（区分Nuxt2/Nuxt3） #

• 如果是Nuxt3：构建后的产物位于.output目录，需直接运行Node脚本，而非nuxt start，修改Dockerfile的CMD：

  CMD ["node", ".output/server/index.mjs"]
  

• 如果是Nuxt2：保持npm run start即可，但需确保Node版本兼容（建议14.x及以上）。

3. 优化Docker构建步骤（可选） #

使用npm ci替代npm install以保证依赖版本一致，同时调整文件复制顺序利用Docker缓存：

FROM node:18-alpine3.18

RUN mkdir -p /front
WORKDIR /front

# 先复制依赖文件，缓存依赖安装层
COPY package*.json ./
RUN npm ci --only=production

# 复制项目文件
COPY . .

# 构建项目
RUN npm run build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

# Nuxt3启动命令
CMD ["node", ".output/server/index.mjs"]

4. 调整docker-compose.yml（可选） #

移除front服务的command字段，直接使用Dockerfile中定义的CMD，避免命令冲突：

version: '2'
services:
    app:
        build: .
        container_name: FastAPI
        command: uvicorn app.main:app --host 0.0.0.0
        ports:
            - 8000:8000
    front:
        build: ./front
        container_name: Nuxt-frontend
        ports:
            - 3000:3000 

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