Next.js Discord

Discord Forum

Problem building application with docker

Answered
Jersey Wooly posted this in #help-forum
Open in Discord
Jersey WoolyOP
Hello! I'm having trouble with Docker. Here is the docker file:
FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json ./
RUN  npm install --production

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

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

COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["npm", "start"]


Basically, no modules can be found when running npm run build on docker but building works fine in cmd/terminal. Any ideas on what's happening?
Answered by Ray
I think it is because you have typescript in devDependencies and npm install --production doesn't install the package from devDependencies
View full answer

38 Replies

Jersey WoolyOP
I'm a complete beginner so sorry if dumb mistakes were made
Jersey WoolyOP
bump
Komondor
looks like you're using absolute import paths, is that configured in your tsconfig.json file? Make sure to copy the tsconfig.json file into your image
@Komondor looks like you're using absolute import paths, is that configured in your tsconfig.json file? Make sure to copy the tsconfig.json file into your image
Jersey WoolyOP
They should be enabled, I enabled it when creating the nextjs app. However, i just changed absolute import paths to relative ones, and now i'm getting this error;
May I create a new nextjs app?
It simply seems to be cursed
Komondor
You didn't need to change the imports to relative imports. You just need to make sure in your Dockerfile you are also copying the tsconfig file into the image
Jersey WoolyOP
Docker should be copying tsconfig, .dockerignore only ignore the things next's examples told me to ignore
I don't truly understand why npm run build works fine on my cmd but doesn't work on docker
@Jersey Wooly I don't truly understand why npm run build works fine on my cmd but doesn't work on docker
Ray
try changing
RUN  npm install --production

to 
RUN  npm ci
Ray
I think it is because you have typescript in devDependencies and npm install --production doesn't install the package from devDependencies
Answer
@Ray try changing ts RUN npm install --production to ts RUN npm ci
Jersey WoolyOP
The problem is solved now
Thanks
sadly, new problems arrive
they don't even make a sense 😔
i'm going to do a little bit of research
@Jersey Wooly sadly, new problems arrive
Ray
do you have tailwindcss in package.json?
Jersey WoolyOP
Yes
I always had it
npm i --save-dev @types/tailwindcss__postcss7-compat also doesn't work
Jersey WoolyOP
{
  "name": "retirees-pojasi",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-regular-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@vercel/postgres": "^0.7.2",
    "autoprefixer": "^9.8.8",
    "dotenv": "^16.4.1",
    "next": "^14.1.4",
    "next-auth": "^4.24.5",
    "postcss": "^7.0.39",
    "react": "^18",
    "react-dom": "^18",
    "react-fontawesome": "^1.7.1",
    "react-hook-form": "^7.50.0",
    "react-toastify": "^10.0.4",
    "tailwind-children": "^0.5.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^5"
  }
}
I haven't touched anything on package.json
turned out tailwind also stopped working
with no interaction with the code
try npm remove tailwindcss and npm install --save tailwindcss
or just change to this "tailwindcss": "^3.3.0",
Jersey WoolyOP
I've reinstalled it and all my styles messed up
tailwind version might have changed something?
its on ^3.4.3 instead of 3.3.0
Ray
yea you can change the version if you need
docker built the app
thank you
new errors arrived too, but I'll figure them myself
Ray
cool
create a new post if you need help