Webpack issues on M1 Mac Book Pro

[deanfields]

Describe the bug

Attempting to run this (following the instructions) on an M1 Macbook Pro and I am getting an error with optipng-bin installing

To reproduce

Steps to reproduce the behaviour:

1. Add RUN apk --no-cache add pkgconfig autoconf automake libtool nasm build-base zlib-dev into node-dev-webpack
2. Attempt to run on M1 Mac as instructions indicate
3. make dev

Expected behaviour

The webpack container to run and watch successfully

Screenshots

If applicable, add screenshots to help explain your problem.

Versions

• Plugin version:
• Craft version:

[khalwat]

Yeah for now probably remove optipng

[deanfields]

Hey I've been trying to find a way to make this work and I think I've come across a solution, I've added this:

CMD CPPFLAGS=-DPNG_ARM_NEON_OPT=0 npm install \ && \ npm run debug

to the node-dev-webpack/Dockerfile,

for reference here is my file in case it's useful:

FROM node:16.13.0-alpine

# Install packages for headless chrome
RUN apk update \
    && \
    apk add --no-cache nmap \
    && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories \
    && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories \
    && \
    apk update \
    && \
    apk add --no-cache \
    # Packages needed for npm install of mozjpeg & cwebp, can't --virtual and apk del later
    # Pre-builts do not work on alpine for either:
    # ref: https://github.com/imagemin/imagemin/issues/168
    # ref: https://github.com/imagemin/cwebp-bin/issues/27
    autoconf \
    automake \
    build-base \
    g++ \
    gcc \
    glu \
    libc6-compat \
    libtool \
    libpng-dev \
    libxxf86vm \
    make \
    nasm \
    # Misc packages
    nano \
    # Image optimization packages
    gifsicle \
    jpegoptim \
    libpng-dev \
    libwebp-tools \
    libjpeg-turbo-dev \
    libjpeg-turbo-utils \
    optipng \
    pngquant \
    # Headless Chrome packages
    chromium \
    harfbuzz \
    "freetype>2.8" \
    ttf-freefont \
    nss

# RUN python3 -m ensurepip
# RUN pip3 install --no-cache --upgrade pip setuptools


ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
ENV CHROME_BIN /usr/bin/chromium-browser
ENV LIGHTHOUSE_CHROMIUM_PATH /usr/bin/chromium-browser

WORKDIR /var/www/project/buildchain/

RUN apk --no-cache add pkgconfig autoconf automake libtool nasm build-base zlib-dev

# Run our webpack build in debug mode

# We'd normally use `npm ci` here, but by using `install`:
# - If `package-lock.json` is present, it will install what is in the lock file
# - If `package-lock.json` is missing, it will update to the latest dependencies
#   and create the `package-lock-json` file
# This automatic running adds to the startup overhead of `docker-compose up`
# but saves far more time in not having to deal with out of sync versions
# when working with teams or multiple environments
CMD CPPFLAGS=-DPNG_ARM_NEON_OPT=0 npm install \
    && \
    npm run debug

[khalwat]

So the flags you mention work great; but we still shouldn't have to build the following:

• cwebp
• optipng
• mozjpeg

...on install. What I'm trying to do is get it to use the pre-built packages that we install with apk for these things, because compiling from source is pretty lengthy, and it requires that we have the dev tools installed in the actual image.

Instead, ideally, we install these things (in the case where there are pre-built packages, such as for cwebp) or we build them from source (in the case of mozjpeg and optipng) but we do that when we build the base image.

That means we wouldn't need the dev tools needed to compile them as part of our actual image, they can be removed after we do the base build.

The problem is, I can't seem to get them to find and work with the pre-built packages, it seems to always want to recompilse them into node_modules/.bin which is a little unfortunate the reasons described above).

[khalwat]

Thx @deanfields -- I switched to Node 16, and added in export CPPFLAGS=-DPNG_ARM_NEON_OPT=0