bug: DaisyUI hangs Docker builds for 64 bit platforms

[nsadeh]

What version of daisyUI are you using?

4.10.5

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

not a UI issue

Describe your issue

I have a server-rendered project that uses DaisyUI. It's being deployed on Google Cloud Run, which requires docker containers to be built for 64bit platforms.

When I run the build command for Docker (see below), the build hangs at the npm run build command perpetually. If I remove dailyui from the plugins list in tailwind.config.js, then the build runs just fine. I can also keep Daisy, but then I have to drop the platform spec from the docker build command, which makes the image undeployable in GCP.

Here's my Dockerfile:

# Stage 1: Build the project
FROM amd64/node:buster AS builder

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json (or npm-shrinkwrap.json) for npm install
COPY package*.json ./
COPY elm-tooling.json ./

# Install dependencies
RUN npm cache clean --force
RUN npm install

# Copy the rest of your application's source code from your host to your image filesystem.
COPY . .

# Build the project
RUN npm run build

# Stage 2: Setup the runtime environment
FROM amd64/node:buster-slim

# Set the working directory
WORKDIR /app

# Copy the build output from the previous stage
COPY --from=builder /app/dist dist
COPY --from=builder /app/dist-server dist-server

# Install production dependencies only
# This is helpful if your dist-server relies on node_modules like koa and koa-static
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/elm-tooling.json ./
RUN npm install

# Expose the port the app runs on
# EXPOSE 8080
RUN echo $PORT
EXPOSE $PORT

# Run the server
CMD ["node", "dist-server/server.mjs"]

Here's the build command:

docker build  -t $IMAGE_TAG --platform linux/amd64 .

When DaisyUI is included in the Tailwind config, the build step looks like this:

#15 [builder 8/8] RUN npm run build
#15 0.691
#15 0.691 > build
#15 0.691 > npm run generate-all && elm-pages build
#15 0.691
#15 1.296
#15 1.296 > generate-all
#15 1.296 > npm run generate:tailwind
#15 1.296
#15 1.902
#15 1.902 > generate:tailwind
#15 1.902 > postcss tailwind.css -o src/tailwind-compiled.css
#15 1.902
#15 2.715
#15 2.715 🌼   daisyUI 4.10.5

It's stuck there perpetually. When it's not included in the config, it builds (although none of the daisy classes or themes are included). If I remove the --platform linux/amd64 but keep the DaisyUI, it also builds fine, but is undeployable in GCP.

[github-actions]

Thank you @nsadeh for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

It's probably an issue from one of the build tools or their dependencies. And since it's not giving an error, it's not easy to guess which one is the problem.
Unfortunately there's nothing I can fix about it on our side.

Can you try with the latest version of Node and the latest version of all NPM dependencies?

[nsadeh]

Here are my dependencies:

  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^6.0.0",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "daisyui": "^4.10.5",
    "elm-codegen": "^0.5.3",
    "elm-optimize-level-2": "^0.3.5",
    "elm-pages": "^3.0.14",
    "elm-review": "^2.11.1",
    "elm-tooling": "^1.15.1",
    "lamdera": "^0.19.1-1.2.1-1",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.10",
    "vite-plugin-webfont-dl": "^3.9.3"
  },

Here is a simplified dockerfile that has the same issue:

# Stage 1: Build the project
FROM node:latest AS builder

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json (or npm-shrinkwrap.json) for npm install
COPY package*.json ./
COPY elm-tooling.json ./

# Install dependencies
RUN npm cache clean --force
RUN npm install

# Copy the rest of your application's source code from your host to your image filesystem.
COPY . .

# Build the project
RUN npm run build

CMD ["echo" "Hello there!"]

It still hangs.

I realize this is a difficult bug to solve. Could it be in the Tailwind plugin code rather than DaisyUI?

[saadeghi]

You don't need @fullhuman/postcss-purgecss anymore (it was only needed for older Tailwind versions) Here's what's needed for PostCSS setup:
https://tailwindcss.com/docs/installation/using-postcss

Also you can try using TailwindCSS CLI instead of postcss and postcss-cli:
https://tailwindcss.com/docs/installation

[nsadeh]

I'll try that setup. I use a framework called elm-pages which runs with Vite, and haven't had luck with tailwind cli so far which is why I used postcss this far.

At this point I removed Daisy UI from my project and refactored it out so the deploy can proceed, but if I have time this weekend I'll try to work it back in.

[saadeghi]

I'm going to close this issue because the problem can't be from daisyUI. it's probably one of build tools.
Feel free to continue the conversation and let me know if you have any questions.