Can't build .jpg images in Docker container

[Labriko]

Hello there

I'm trying to dockerize a node/react SPA. When Docker runs the build script in webpack container, I get an error:

ERROR in ./src/containers/Home/logo.jpg
Module build failed: Error: /teachbase/app/front/node_modules/mozjpeg/vendor/cjpeg: 1: /teachbase/app/front/node_modules/mozjpeg/vendor/cjpeg: Syntax error: word unexpected (expecting ")")

    at Promise.all.then.arr (/teachbase/app/front/node_modules/execa/index.js:231:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)
 @ ./src/containers/Home/Home.js 27:12-33
 @ ./src/containers/index.js
 @ ./src/client.js
error Command failed with exit code 1.

But what is interesting is that I don't get any errors when I do the same on my local machine. Everything goes as expected.

Environment:

Server: Ubuntu 14.04.5 LTS, Node v8.1.4
Local machine: macOS Sierra 10.12.5, Node v8.7.0

Docker v17.09.0-ce, build afdb6d4
webpack v3.7.1
react and react-dom v16.0.0

Webpack config:

{
  test: /\.(jpeg|jpg|png|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10240,
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        query: {
          progressive: true,
          optimizationLevel: 7,
          interlaced: false,
          pngquant: {
            quality: '65-90',
            speed: 4
          },
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: true,
          },
          optipng: {
            optimizationLevel: 7,
          }
        }
      }
    }
  ]
}

Perhaps it's related to this issue. And if not, I'll ask it there or there

Thanks

[RadomirPerisic]

There's a package missing, I have the same error on node:alpine, it's related to this.

There should be a fallback or optimizations should be skipped if this lib is missing. Same thing applies to jpg and gif optimizations.

[haroldtreen]

Any resolutions on this? I'm seeing the same error...

[wallymathieu]

Is the vendor/cjpeg a correct binary? I noticed that the compiled binary on a ubuntu18.04 32 bit system was referencing 64 bit libraries...

[haroldtreen]

@wallymathieu I think you're right. I deleted the node_modules in my host machines folder and noticed that the error went away. Should have been getting ignored by .dockerignore but seemed to be getting pulled in... whoops!

[gruckion]

@wallymathieu I think you're right. I deleted the node_modules in my host machines folder and noticed that the error went away. Should have been getting ignored by .dockerignore but seemed to be getting pulled in... whoops!

I had the same issue, and changed my docker ignore as the docker ignore is at the root while the Dockerfile is like 3 sub folders in.

**/node_modules .dockerignore .env .git .gitignore **/.vs **/.vscode */bin */obj **/.toolstarget **/wwwroot

[tlan16]

I had similar issue with alpine. I got it working at last. Here's my Dockerfile

# Stage 1: Build

FROM node:10.16.3-alpine AS builder

## Install OS dependencies
RUN apk --no-cache add \
    ca-certificates \
    build-base \
    autoconf \
    automake \
    zlib \
    bash \
    libltdl \
    libtool \
    zlib-dev \
    nasm
ENV ACLOCAL_PATH=/usr/share/aclocal
ENV LIBRARY_PATH=/lib:/usr/lib

WORKDIR /opt/app
COPY . .
RUN ["npm", "install"]
RUN ["npm", "run", "build"]

# Stage 2: Hosting
FROM nginx:1.16.1-alpine

## Copy built files
WORKDIR /var/www
COPY --from=builder /opt/app/dist .

## Copy nginx config file
COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf

## Remove repositories to prevent tempering
RUN ["rm", "/etc/apk/repositories"]

Webpack config:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const Dotenv = require('dotenv-webpack')

const javascriptLoader = {
  test: /\.(js|jsx)$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
  },
}

const styleLoader = {
  test: /\.css$/,
  use: [
    'style-loader',
  ],
}

const imageLoader = {
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
    },
  ],
}

const plugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin(),
  new Dotenv(),
]

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    chunkFilename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      javascriptLoader,
      styleLoader,
      imageLoader,
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  plugins,
  devtool: 'eval-source-map',
}

My project repo: https://github.com/tlan16/learn-react/tree/bc0117b9273758f2fa57557ad4c0eabe0f346bac

[Veraxus]

I've tried dozens of different official node releases on docker hub and all have this problem. If it's a missing linux package, that's a major problem because these are official node images.