react-scripts: not found when building docker image in CI, but works locally

Question

I have a Dockerfile to build a React app and copy the build to an Nginx container.

FROM node:14-buster-slim AS node-base

FROM node-base as deps
WORKDIR /app

COPY ./ui/package.json ./ui/yarn.lock ./ui/.npmrc ./
RUN yarn install --frozen-lockfile

FROM node-base as build-ui
WORKDIR /app

COPY ./ui ./
COPY --from=deps /app/package.json /app/yarn.lock /app/node_modules ./
RUN yarn run build

FROM nginx:1.21-alpine as ui-server
WORKDIR /usr/share/nginx/html

COPY --from=build-ui /app/build .

COPY ./ui/nginx/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

Locally, the build works without issue. In CI however, it fails to build:

#14 [build-ui 4/4] RUN yarn run build
#14 0.490 yarn run v1.22.17
#14 0.523 $ react-scripts build
#14 0.535 /bin/sh: 1: react-scripts: not found
#14 0.545 error Command failed with exit code 127.
#14 0.546 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#14 ERROR: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 127

Answer 1

The reason it worked locally was because my local node_modules was copied into the container in the COPY ./ui ./ step.

Once I .dockerignore-d node_modules, the realized the COPY --from=deps /app/package.json /app/yarn.lock /app/node_modules ./ was copying the children of node_modules to the project root instead of the modules directory.

Changing the COPY step to the following resolved the issue:

COPY --from=deps /app/package.json /app/yarn.lock ./
COPY --from=deps /app/node_modules /app/node_modules