Next JS app builds in the local but failed inside Docker

Question

I am working on a next JS project. I can successfully build that on my local machine. But when I am trying to dockerized the app and build the app inside the docker image I am getting error while building the app. From the error I think that the docker build can not find my static image files. But I can browse the files inside docker image.

My File Structure

• assets
• • image files
• components
• • common components
• data
• • some static data
• pages
• public
• styles

Dockerfile

FROM node:18-alpine3.14

RUN apk update && \
    apk add --no-cache libc6-compat

ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production
ENV PORT 3000
EXPOSE 3000

COPY . /app

WORKDIR /app


RUN adduser -u 5678 --disabled-password --gecos "" appuser && chown -R appuser /app
USER appuser


RUN yarn install
RUN yarn build


ENTRYPOINT [ "sh", "entrypoint.sh" ]

entrypoint.sh

yarn start

Error During Build

info  - Creating an optimized production build
Failed to compile.

./assets/company/employee/group.jpg
TypeError: Failed to parse URL from /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm
    at new Request (node:internal/deps/undici/undici:4816:19)
    at Agent2.fetch2 (node:internal/deps/undici/undici:5544:29)
    at Object.fetch (node:internal/deps/undici/undici:6372:20)
    at fetch (node:internal/bootstrap/pre_execution:199:25)
    at instantiateAsync (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:424:28)
    at createWasm (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:447:13)
    at /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:1480:19
    at Object.instantiateEmscriptenWasm (/app/node_modules/next/dist/server/lib/squoosh/emscripten-utils.js:15:12)
    at Object.dec (/app/node_modules/next/dist/server/lib/squoosh/codecs.js:156:42)
    at Object.decodeBuffer (/app/node_modules/next/dist/server/lib/squoosh/impl.js:55:31)

Import trace for requested module:
./pages/ourcompany/OurStory.js

./assets/home/clientFeedBack/image/Ellipse 6-2.jpg
TypeError: Failed to parse URL from /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm
    at new Request (node:internal/deps/undici/undici:4816:19)
    at Agent2.fetch2 (node:internal/deps/undici/undici:5544:29)
    at Object.fetch (node:internal/deps/undici/undici:6372:20)
    at fetch (node:internal/bootstrap/pre_execution:199:25)
    at instantiateAsync (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:424:28)
    at createWasm (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:447:13)
    at /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:1480:19
    at Object.instantiateEmscriptenWasm (/app/node_modules/next/dist/server/lib/squoosh/emscripten-utils.js:15:12)
    at Object.dec (/app/node_modules/next/dist/server/lib/squoosh/codecs.js:156:42)
    at Object.decodeBuffer (/app/node_modules/next/dist/server/lib/squoosh/impl.js:55:31)

Import trace for requested module:
./components/ClientFeedback.js
./pages/index.js

./assets/home/globalSection/Rectangle 32.jpg
TypeError: Failed to parse URL from /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm
    at new Request (node:internal/deps/undici/undici:4816:19)
    at Agent2.fetch2 (node:internal/deps/undici/undici:5544:29)
    at Object.fetch (node:internal/deps/undici/undici:6372:20)
    at fetch (node:internal/bootstrap/pre_execution:199:25)
    at instantiateAsync (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:424:28)
    at createWasm (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:447:13)
    at /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:1480:19
    at Object.instantiateEmscriptenWasm (/app/node_modules/next/dist/server/lib/squoosh/emscripten-utils.js:15:12)
    at Object.dec (/app/node_modules/next/dist/server/lib/squoosh/codecs.js:156:42)
    at Object.decodeBuffer (/app/node_modules/next/dist/server/lib/squoosh/impl.js:55:31)

Import trace for requested module:
./pages/GlobalFamily.js

./assets/home/serviceSection/bg.jpg
TypeError: Failed to parse URL from /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm
    at new Request (node:internal/deps/undici/undici:4816:19)
    at Agent2.fetch2 (node:internal/deps/undici/undici:5544:29)
    at Object.fetch (node:internal/deps/undici/undici:6372:20)
    at fetch (node:internal/bootstrap/pre_execution:199:25)
    at instantiateAsync (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:424:28)
    at createWasm (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:447:13)
    at /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:1480:19
    at Object.instantiateEmscriptenWasm (/app/node_modules/next/dist/server/lib/squoosh/emscripten-utils.js:15:12)
    at Object.dec (/app/node_modules/next/dist/server/lib/squoosh/codecs.js:156:42)
    at Object.decodeBuffer (/app/node_modules/next/dist/server/lib/squoosh/impl.js:55:31)

Import trace for requested module:
./pages/Services.js

./assets/home/serviceViewSection/Rectangle 420.jpg
TypeError: Failed to parse URL from /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.wasm
    at new Request (node:internal/deps/undici/undici:4816:19)
    at Agent2.fetch2 (node:internal/deps/undici/undici:5544:29)
    at Object.fetch (node:internal/deps/undici/undici:6372:20)
    at fetch (node:internal/bootstrap/pre_execution:199:25)
    at instantiateAsync (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:424:28)
    at createWasm (/app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:447:13)
    at /app/node_modules/next/dist/server/lib/squoosh/mozjpeg/mozjpeg_node_dec.js:1480:19
    at Object.instantiateEmscriptenWasm (/app/node_modules/next/dist/server/lib/squoosh/emscripten-utils.js:15:12)
    at Object.dec (/app/node_modules/next/dist/server/lib/squoosh/codecs.js:156:42)
    at Object.decodeBuffer (/app/node_modules/next/dist/server/lib/squoosh/impl.js:55:31)

Import trace for requested module:
./pages/ServiceView.js


> Build failed because of webpack errors

I would appreciate the help.

Thanks

Answer 1

There's no current right way to do this. See this feature request: https://github.com/dotnet/sdk/issues/16852

As suggested on the issue, one workaround is to look for has the following vulnerable packages in the output.