Using imagemin-mozjpeg with Docker throws this error "spawn Unknown system error -8"

Question

On my macOS I don't seem to have any issue, but when using Docker I get this output:

node_1      | [08:16:41] Finished 'clean' after 23 ms
node_1      | [08:16:41] Starting 'scripts'...
node_1      | [08:16:41] Starting 'styles'...
node_1      | [08:16:41] Starting 'images'...
node_1      | [08:16:41] Starting 'html'...
node_1      | ℹ - [Scripts] Compiling...
node_1      | ℹ - [Styles] Compiling...
node_1      | ℹ - [Images] Optimizing...
node_1      | ℹ - [HTML] Compiling...
node_1      | [08:16:58] 'images' errored after 17 s
node_1      | [08:16:58] Error in plugin "gulp-imagemin"
node_1      | Message:
node_1      |     spawn Unknown system error -8
node_1      | Details:
node_1      |     errno: -8
node_1      |     code: Unknown system error -8
node_1      |     syscall: spawn
node_1      |     fileName: /usr/src/app/assets/img/about-01.jpg
node_1      |     domainEmitter: [object Object]
node_1      |     domainThrown: false
node_1      | 
node_1      | [08:16:58] 'build' errored after 17 s
node_1      | npm ERR! code ELIFECYCLE
node_1      | npm ERR! errno 1
node_1      | npm ERR! @ dev: `gulp build && gulp watch`
node_1      | npm ERR! Exit status 1
node_1      | npm ERR! 
node_1      | npm ERR! Failed at the @ dev script.
node_1      | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
node_1      | 
node_1      | npm ERR! A complete log of this run can be found in:
node_1      | npm ERR!     /root/.npm/_logs/2021-08-22T08_16_58_562Z-debug.log
node_1 exited with code 1

My Dockerfile:

FROM node:14-alpine3.11

WORKDIR /usr/src/app

COPY ./app/package.json /usr/src/app

RUN apk --no-cache add \
    ca-certificates \
    build-base \
    autoconf \
    automake \
    zlib \
    bash \
    libltdl \
    libtool \
    zlib-dev \
    nasm \
    && rm -rf /var/lib/apt/lists/*
    # mozjpeg: the packages above allowing to compile the binaries

RUN npm install -g gulp \
    && npm install gulp

ENV PATH ./node_modules/.bin/:$PATH

gulpfile

import imagemin, { gifsicle, mozjpeg, optipng, svgo } from 'gulp-imagemin';

const imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('images', () => {
  logger('[Images] Optimizing...');
  return gulp
    .src(`${options.paths.src.img}/**/*.*`)
    .pipe(
      imagemin(
        [
          gifsicle({ interlaced: true }),
          imageminMozjpeg({ quality: 80, progressive: true }),
          optipng({ optimizationLevel: 5 }),
          svgo({ plugins: [{ removeViewBox: true }, { cleanupIDs: false }] }),
        ],
        {
          silent: false,
        }
      )
    )
    .pipe(
      isProd
        ? gulp.dest(options.paths.build.img)
        : gulp.dest(options.paths.dist.img)
    )
    .on('end', () => logger('[Images] Success!', figures.tick, 'GREEN'))
    .on('error', () => logger('[Images] Failed', figures.cross, 'RED'));
});

package.json

{
"devDependencies": {
"gulp-imagemin": "^8.0.0",
"imagemin-mozjpeg": "^6.0.0"
  }
}

I cleaned cache, ran npm i again but nothing helps. Earlier, I fixed this issue: mozjpeg/vendor/cjpeg` binary doesn't seem to work correctly—https://github.com/imagemin/imagemin-mozjpeg/issues/28

I did some research yet couldn't find someone that faces the exact problem.

docker-compose.yml

version: '3'

volumes:
  local_postgres_data: {}
  local_postgres_data_backups: {}

services:
  postgres:
    build:
      context: .
      dockerfile: ./app/docker/postgres/Dockerfile
    image: webapp_prodcution_postgres
    volumes:
      - local_postgres_data:/var/lib/postgresql/data:Z
      - local_postgres_data_backups:/backups:z
    env_file:
      - ./app/.envs/.local/.env

  django:
    image: webapp_local_django
    build:
      context: .
      dockerfile: ./app/docker/django/Dockerfile
    volumes:
      - ./app/:/usr/src/app/
    command: /usr/src/app/docker/django/start_dev
    ports:
      - 8000:8000
    env_file:
      - ./app/.envs/.local/.env
    depends_on:
      - postgres

  node:
    image: webapp_local_node
    build:
      context: .
      dockerfile: ./app/docker/node/Dockerfile
    depends_on:
      - django
    volumes:
      - ./app/:/usr/src/app/
    command: npm run dev
    ports:
      - '3000:3000'

Answer 1

Frist new install npm.

npm install

vue-loader is a loader for webpack that allows you to author Vue components in a format. Please run the command.

npm i vue-loader

Now this command run.

npm run dev

Answer 2

After hours of research and experimenting with different settings, I managed to resolve mozjpeg errors when using Linux/Docker. The issue is particularly when using alpine image.

My updated Dockerfile:

FROM node:12-buster-slim

RUN npm i npm@latest -g

WORKDIR /usr/src

COPY ./app/package*.json ./

RUN apt-get update && apt-get install -y --no-install-recommends \
    autoconf \
    automake \
    g++ \
    libpng-dev \
    make\
    nasm \
    -y wget \
    && wget -q -O /tmp/libpng12.deb http://mirrors.kernel.org/ubuntu/pool/main/libp/libpng/libpng12-0_1.2.54-1ubuntu1_amd64.deb \
    && dpkg -i /tmp/libpng12.deb \
    && rm /tmp/libpng12.deb \
    && npm install --no-optional && npm cache clean --force \
    npm install -g gulp \
    && npm install gulp

ENV PATH /usr/src/node_modules/.bin/:$PATH

WORKDIR /usr/src/app

COPY . .

These settings might save you hours of frustration. BTW Node's alpine image is NOT recommended because of long build time, even though it's small image size.

Happy coding!

Answer 3

On my macOS [...] using Docker [...] I run only once npm i outside docker

Docker usually runs Linux containers (except in the case of Windows containers on a Windows host). With this setup, you can't inject a node_modules directory installed on a MacOS system into the Linux container; you will get errors much like the one you see.

If you're trying to get a live development environment, the easiest way to do this is to ignore Docker and just use Node.

brew install node
npm install
docker-compose up -d django
npm run dev

If you want to run this in Docker, the image should generally be self-contained; don't try to inject code from the host, and prefer to set things up in the Dockerfile if they make sense there. The first step is to prevent Docker from copying the host's node_modules directory into the container; create a .dockerignore file containing the line

# .dockerignore
node_modules

The Dockerfile needs to COPY the application code in, RUN npm install, and set the standard metadata to run the application.

FROM node:14-alpine3.11

# Install OS packages before COPYing anything at all in.
# (Review this list: do you _need_ a full C toolchain and
# low-level tools like libtool?)
RUN apk add ...

WORKDIR /usr/src/app

# Install Node packages.  Make sure to COPY the lock file in
# to get reproducible versions.  Don't `npm install` extra packages;
# add them to `package.json` instead.
COPY package.json package-lock.json .
RUN npm ci

# Install the rest of the application.
COPY . .
RUN npm build

# Say how to start the container.
CMD npm run start

Now that the image contains the source code, Node library dependencies, (Linux) support binaries, and the default command, you don't need to specify any of this in the docker-compose.yml; that section can just be

version: '3.8'
services:
  ...
  node:
    build:
      context: ./app              # (or a subdirectory containing the Node application?)
      dockerfile: Dockerfile.node # (omit if named exactly `Dockerfile`)
    ports:
      - '3000:3000'
    # depends_on:                 # only if the _server_ makes direct calls to the
    #   - django                  # backend; not if only the browser code does
    # no volumes:, command:, image: name override

(You should be able to similarly simplify the Compose setup for the Django application: COPY its source code into its image, set the standard CMD there, and remove almost all of its run-time options.)