CODEWITHSUNDEEP
dockerwebpackdocker-composenext.jsdockerfile
Nahidujjaman Hridoy
Nahidujjaman Hridoy

Reputation: 2217

Next JS app builds in the local but failed inside Docker

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

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

Upvotes: 4

Views: 4976

Answers (2)

noomerikal
noomerikal

Reputation: 791

There's an issue importing images in Next 12.1.6 with node 18.

https://github.com/vercel/next.js/issues/38020

As noted in the comments, npm i sharp will likely resolve the issue.

Upvotes: 9

Nahidujjaman Hridoy
Nahidujjaman Hridoy

Reputation: 2217

The problem was with the alpine distro. It is a basic linux package that doesn't have any dependency. We need to install some dependency here, specially to handle JPEG images.

Updated Code: Dockerfile

FROM node:lts-alpine3.14

RUN apk update && \
    apk add --no-cache libc6-compat autoconf automake libtool make tiff jpeg zlib zlib-dev pkgconf nasm file gcc musl-dev

# COPY package.json .

RUN npm install -g npm

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" ]

Upvotes: 3

Related Questions