Docker Build Error ARG or ENV missing during build process NEXT_PUBLIC_SALEOR_API_URL

Question

I have followed the directions: cloned the repo, cp .env.example to .env, I have run pnpm i. When I create a docker image of this repo it fails with the same reason/text/error above from original poster. I saw also that the .env file was being ignored by the .gitignore file and even changing this does not fix it. It has been 3 years since I worked with a saleor store and I am not sure what I could be doing wrong since the directions seem simple enough to follow. I have used this process for Saleor and Dashboard and they create the docker images without any errors.

2024-01-10T16:04:12Z > [builder 6/6] RUN pnpm build:
2024-01-10T16:04:12Z #22 1.681 > pnpm run generate
2024-01-10T16:04:12Z #22 1.681
2024-01-10T16:04:12Z #22 2.895
2024-01-10T16:04:12Z #22 2.895 > [email protected] generate /app
2024-01-10T16:04:12Z #22 2.895 > graphql-codegen --config .graphqlrc.ts
2024-01-10T16:04:12Z #22 2.895
2024-01-10T16:04:12Z #22 5.155 Before GraphQL types can be generated, you need to set NEXT_PUBLIC_SALEOR_API_URL environment variable.
2024-01-10T16:04:12Z #22 5.157 Follow development instructions in the README.md file.
2024-01-10T16:04:12Z #22 5.223  ELIFECYCLE  Command failed with exit code 1.
2024-01-10T16:04:12Z #22 5.246  ELIFECYCLE  Command failed with exit code 1.
2024-01-10T16:04:12Z ------
2024-01-10T16:04:12Z ERROR: failed to solve: executor failed running [/bin/sh -c pnpm build]: exit code: 1
2024-01-10T16:04:12Z Build failed using Buildkit (1)

I have this being built within the hub.docker system straight from my GitHub repo.

(https://i.stack.imgur.com/yTXeG.png) I have even specified these in the build variables section of the hub.docker system and the build still fails. I don't understand why the other 2 images (Saleor 3.18 and Dashboard 3.18) will build correctly but this one does not. This repo will however work if I use 'docker compose up' from my local computer m2 Mac.

Steps to reproduce

Clone repo cp .env.example to .env file and configure settings run ppm i add image to hub.docker.com and set as automatic build from GitHub repo add build arguments into section for NEXT_PUBLIC_SALEOR_API_URL and NEXT_PUBLIC_STOREFRONT_URL Build process fails with error: 2024-01-10T23:53:14Z > [builder 6/6] RUN pnpm build: 2024-01-10T23:53:14Z #22 1.761 > pnpm run generate 2024-01-10T23:53:14Z #22 1.761 2024-01-10T23:53:14Z #22 2.992 2024-01-10T23:53:14Z #22 2.992 > [email protected] generate /app 2024-01-10T23:53:14Z #22 2.992 > graphql-codegen --config .graphqlrc.ts 2024-01-10T23:53:14Z #22 2.992 2024-01-10T23:53:14Z #22 5.275 Before GraphQL types can be generated, you need to set NEXT_PUBLIC_SALEOR_API_URL environment variable. 2024-01-10T23:53:14Z #22 5.277 Follow development instructions in the README.md file. 2024-01-10T23:53:14Z #22 5.343  ELIFECYCLE  Command failed with exit code 1. 2024-01-10T23:53:14Z #22 5.370  ELIFECYCLE  Command failed with exit code 1. 2024-01-10T23:53:14Z ------ 2024-01-10T23:53:14Z ERROR: failed to solve: executor failed running [/bin/sh -c pnpm build]: exit code: 1 2024-01-10T23:53:14Z Build failed using Buildkit (1)

---

I have also tried to build this on my local Mac mini M2 and the build command will not run getting the same error as hub.docker.com even with the env variable set before running. It will work however if I run 'docker compose up' command.

export NEXT_PUBLIC_SALEOR_API_URL=http://localhost:8000/graphql/

=> ERROR [builder 6/6] RUN pnpm build 1.5s

[builder 6/6] RUN pnpm build: 0.475 0.475 > [email protected] prebuild /app 0.475 > pnpm run generate 0.475 0.742 0.742 > [email protected] generate /app 0.742 > graphql-codegen --config .graphqlrc.ts 0.742 1.496 Before GraphQL types can be generated, you need to set NEXT_PUBLIC_SALEOR_API_URL environment variable. 1.496 Follow development instructions in the README.md file. 1.503  ELIFECYCLE  Command failed with exit code 1. 1.512  ELIFECYCLE  Command failed with exit code 1. Dockerfile:37

35 | RUN yarn global add pnpm@$PNPM_VERSION 36 | 37 | >>> RUN pnpm build 38 | 39 | # Production image, copy all the files and run next

ERROR: failed to solve: process "/bin/sh -c pnpm build" did not complete successfully: exit code: 1

docker compose file:

version: "3"

services:
  saleor-storefront:
    container_name: saleor-storefront
    build:
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_SALEOR_API_URL: ${NEXT_PUBLIC_SALEOR_API_URL}
        NEXT_PUBLIC_STOREFRONT_URL: ${NEXT_PUBLIC_STOREFRONT_URL}
    restart: always
    ports:
      - 3000:3000
    networks:
      - saleor_network

  # Add more containers below (nginx, postgres, etc.)

networks:
  saleor_network:
    external: false

Dockerfile:

FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Get PNPM version from package.json
RUN export PNPM_VERSION=$(cat package.json | jq '.engines.pnpm' | sed -E 's/[^0-9.]//g')

COPY package.json pnpm-lock.yaml ./
RUN yarn global add pnpm@$PNPM_VERSION
RUN pnpm i --frozen-lockfile --prefer-offline

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

ENV NEXT_OUTPUT=standalone
ARG NEXT_PUBLIC_SALEOR_API_URL
ENV NEXT_PUBLIC_SALEOR_API_URL=${NEXT_PUBLIC_SALEOR_API_URL}
ARG NEXT_PUBLIC_STOREFRONT_URL
ENV NEXT_PUBLIC_STOREFRONT_URL=${NEXT_PUBLIC_STOREFRONT_URL}

# Get PNPM version from package.json
RUN export PNPM_VERSION=$(cat package.json | jq '.engines.pnpm' | sed -E 's/[^0-9.]//g')
RUN yarn global add pnpm@$PNPM_VERSION

RUN pnpm build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

ARG NEXT_PUBLIC_SALEOR_API_URL
ENV NEXT_PUBLIC_SALEOR_API_URL=${NEXT_PUBLIC_SALEOR_API_URL}
ARG NEXT_PUBLIC_STOREFRONT_URL
ENV NEXT_PUBLIC_STOREFRONT_URL=${NEXT_PUBLIC_STOREFRONT_URL}

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs


CMD ["node", "server.js"]