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.

[AndreyBarkov]

I have a similar issue building a docker image for my Rails app on macOS. I'm running docker build --platform="linux/amd64" to build docker image locally.
These are the logs without DaisyUI in my tailwind config, which takes about 7.2s to precompile assets:

And this is what I see when I include DaisyUI in my tailwind config:

It sits there forever, and I couldn't produce any additional logs. However, when I run the precompile command outside of docker, it takes just a couple of seconds to finish with DaisyUI. Running on Node v20 with the following dependencies:

{
  "dependencies": {
    "daisyui": "^4.4.4",
    "logrocket": "^8.1.0",
    "stimulus-autocomplete": "^3.1.0",
    "tailwindcss": "^3.3.5",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/line-clamp": "^0.4.4"
  },
  "engines": {
    "node": "^20.x"
  },
  "devDependencies": {
    "prettier-plugin-erb": "^0.4.0"
  }
}

[saadeghi]

@AndreyBarkov can you share the setup pipeline for tour CSS file? How are you generating the CSS? Is it Tailwind CLI?

[nickhammond]

Just started experiencing this as well, going to probably end up switching to another component library but would love to figure out what's going on. Anyone on this thread resolve the issue?

Utilzing the tailwind CLI via rails assets compilation. I've tried modifying my tailwind.config.js to comment out everything but the require('daisyui') line but it always hangs at the same place. It looks like it's somewhere in these lines https://github.com/saadeghi/daisyui/blob/v4.12.10/src/index.js#L31-L77

  "devDependencies": {
    "daisyui": "^4.11.1",
    "tailwindcss": "^3.4.10"
  }
}

[nickhammond]

Here's the simplest possible setup I could do to trigger the build hanging, it's most likely ARM specific when building for linux/amd64, removing the platform option builds just fine. Only the files below are in this directory so there's nothing for daisyui to actually do besides being required by tailwind.

.dockerignore

node_modules

Dockerfile

FROM node:slim AS builder
WORKDIR /app

COPY package*.json ./

RUN npm cache clean --force
RUN npm install

COPY . .

RUN npx tailwindcss

CMD ["ls", "-lha"]

package.json

{
  "devDependencies": {
    "daisyui": "^4.12.10",
    "tailwindcss": "^3.4.10"
  }
}

tailwind.config.js

module.exports = {
  plugins: [
    require('daisyui')
  ],
}

docker build --platform linux/amd64 .

[jharrilim]

I have the same issue, and I've confirmed that commenting out the require('daisyui') plugin makes the issue go away, so the issue does seem to stem from an interaction within the daisyui plugin.

edit: Some similar issues with Node processes hanging in docker builds:

• Parcel build hangs while building docker image for linux/amd64 parcel-bundler/parcel#9834
• docker buildx hang on node:22-alpine (armv6/armv7) nodejs/docker-node#2077
• NPM install stucks with node:20 nodejs/docker-node#1946

[Vagab]

I'm experiencing the same error. Does anyone have a workaround in mind?

edit: downgrade to Node 21. Solves the issue for me for now