0

I face an issue of deploying my Next.js project to server using Docker. My Dockerfile:

    # Build stage
FROM node:18-alpine AS builder

WORKDIR /app

# Add build-time variables
ARG NEXTAUTH_URL
ARG NEXT_PUBLIC_API_URL
ARG API_URL
ARG GOOGLE_CLIENT_ID
ARG GOOGLE_CLIENT_SECRET
ARG NODE_ENV=production

# Set environment variables
ENV NEXTAUTH_URL=${NEXTAUTH_URL}
ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
ENV API_URL=${API_URL}
ENV GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
ENV GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
ENV NODE_ENV=${NODE_ENV}
ENV NODE_OPTIONS="--max-old-space-size=4096"

# Install necessary build tools
RUN apk add --no-cache libc6-compat

# Copy package files first
COPY package*.json ./

# Install dependencies
RUN npm cache clean --force && \
    npm install --legacy-peer-deps
    
# Copy configuration files first
COPY tsconfig.json ./
COPY postcss.config.js ./
COPY tailwind.config.js ./
COPY next.config.js ./

# Then copy the rest of the files
COPY . .

# Build the application
RUN npm run build

# Production stage
FROM node:18-alpine AS runner

WORKDIR /app

ENV NODE_ENV production
ENV NODE_OPTIONS="--max-old-space-size=2048"

# Copy necessary files
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/postcss.config.js ./
COPY --from=builder /app/tailwind.config.js ./

CMD ["npm", "start"]

My package.json:

    {
  "name": "tothetop-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/core": "^0.34.2",
    "@heroicons/react": "^2.1.1",
    "@tiptap/extension-link": "^2.11.7",
    "@tiptap/extension-underline": "^2.11.7",
    "@tiptap/react": "^2.11.7",
    "@tiptap/starter-kit": "^2.11.7",
    "@types/react-datepicker": "^6.2.0",
    "antd": "^5.24.5",
    "date-fns": "^4.1.0",
    "draft-js": "^0.11.7",
    "draft-js-import-html": "^1.4.1",
    "draftjs-utils": "^0.10.2",
    "framer-motion": "^12.6.2",
    "googleapis": "^148.0.0",
    "next": "^15.2.4",
    "next-auth": "^4.24.11",
    "react": "18.2.0",
    "react-contenteditable": "^3.3.7",
    "react-datepicker": "^8.2.1",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-text-selection": "^0.0.0-alpha",
    "rsuite": "^5.79.0",
    "sanitize-html": "^2.15.0",
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/typography": "^0.5.16",
    "autoprefixer": "^10.4.21",
    "tailwind-scrollbar": "^3.0.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/typography": "^0.5.16",
    "@types/draft-js": "^0.11.18",
    "@types/node": "^20.11.24",
    "@types/react": "^18.2.61",
    "@types/react-dom": "^18.2.19",
    "@types/sanitize-html": "^2.15.0",
    "autoprefixer": "^10.4.21",
    "tailwind-scrollbar": "^3.0.0",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.3.3"
  }
}

And as a result I receive this error

  65.11 Failed to compile.
65.11 
65.11 src/app/layout.tsx
65.11 An error occurred in `next/font`.
65.11 
65.11 Error: Cannot find module 'tailwindcss'
65.11 Require stack:
65.11 - /app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
65.11 - /app/node_modules/next/dist/build/webpack/config/blocks/css/index.js
65.11 - /app/node_modules/next/dist/build/webpack/config/index.js
65.11 - /app/node_modules/next/dist/build/webpack-config.js
65.11 - /app/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
65.11 - /app/node_modules/next/dist/build/collect-build-traces.js
65.11 - /app/node_modules/next/dist/build/index.js
65.11 - /app/node_modules/next/dist/cli/next-build.js
65.11     at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
65.11     at /app/node_modules/next/dist/server/require-hook.js:55:36
65.11     at Function.resolve (node:internal/modules/helpers:188:19)
65.11     at loadPlugin (/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:53:32)
65.11     at /app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:56
65.11     at Array.map (<anonymous>)
65.11     at getPostCssPlugins (/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:47)
65.11     at async /app/node_modules/next/dist/build/webpack/config/blocks/css/index.js:125:36
65.11     at async /app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:94:33
65.11     at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:157:20)
65.11 
65.13 
65.13 > Build failed because of webpack errors
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

What can be the solution?

Improve this question
3
  • Why did I mark it as a duplicate? I'm pretty sure you installed v4. The shared package.json is either manipulated or not executed properly, as TailwindCSS v3 appears twice in it. Commented Apr 17 at 7:35
  • When using v3, use the command npm install -D tailwindcss@3. v3 includes the CLI command called tailwindcss, but v4 no longer includes it. Commented Apr 17 at 7:36
  • I think the cleanest solution is to delete your node_modules folder and the package lock file, then manually reinstall all your dependencies. For TailwindCSS, use the command npm install -D tailwindcss@3 (to avoid the automatic installation of v4). In addition to this, you'll also need PostCSS, which is not currently included in your package.json. I recommend following the v3 + Next.js installation steps: v3.tailwindcss.com/docs/guides/nextjs Commented Apr 17 at 7:39

2 Answers 2

Reset to default
0

Your package.json file is corrupted and contains incorrect dependencie - some of them are duplicated. I recommend deleting the node_modules folder and the lock file, then manually reinstalling your dependencies to ensure everything is clean.

TailwindCSS v3 with Next.js

For v3 installation, you should now use the command

npm install -D tailwindcss@3

However, to make it work with Next.js, you also need to install PostCSS:

npm install -D postcss

For the full installation, read the v3 instructions:

TailwindCSS v4 with React

If you want to try v4, there have been many breaking changes. The npx tailwindcss CLI command and running the init process are no longer needed. These have been removed along with the tailwind.config.js. Instead, a CSS-first configuration has been introduced.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

There are multiple things to try, Since it says Cannot find module 'tailwindcss'

Main thing you got to remove using ^ in your package.json. It may cause some unwanted troubles. due to it may install the latest minor or patch on everytime you install the packages.

Try these steps

  1. Try building Locally (Just npm build or yarn build using "node 18")
  2. Try building locally using local docker

if above fails, lets remove .lock file and nodemodules and reinstall them after clearing cache.

npm cache clean --force

if above works, change your docker code to install your both dependencies and devDependencies all at once

Move tailwindcss, postcss, and autoprefixer to dependencies

npm install tailwindcss@3 postcss autoprefixer --save

If these steps not clear your error, need to dig more in to your code, how you used the layout / app & config files.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.