Fails to build docker production environment with default package of Remix + NextUI

[127]

Got an error while trying to build by default docs Remix 2.3.1 with NextUI (Tailwind enabled).

tailwind.config.ts

const { nextui } = require("@nextui-org/react");

import type { Config} from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
} satisfies Config

package. json

{
  "name": "localhost,
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc",
    "setup": "prisma generate && prisma migrate deploy && prisma db seed"
  },
  "dependencies": {
    "@nextui-org/react": "^2.2.9",
    "@prisma/client": "^5.5.2",
    "@remix-run/css-bundle": "2.3.1",
    "@remix-run/node": "2.3.1",
    "@remix-run/react": "2.3.1",
    "@remix-run/serve": "2.3.1",
    "bcryptjs": "^2.4.3",
    "framer-motion": "^10.16.4",
    "i18next": "^23.7.3",
    "i18next-browser-languagedetector": "^7.2.0",
    "i18next-fs-backend": "^2.3.0",
    "i18next-http-backend": "^2.4.1",
    "is-ip": "^5.0.1",
    "isbot": "^3.6.8",
    "jsonwebtoken": "^9.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-recaptcha-ultimate": "^1.2.0",
    "react-i18next": "^13.4.0",
    "remix-auth": "^3.6.0",
    "remix-auth-apple": "^0.1.1",
    "remix-auth-form": "^1.4.0",
    "remix-auth-socials": "^2.0.5",
    "remix-i18next": "^5.4.0",
    "tiny-invariant": "^1.3.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@remix-run/dev": "2.3.1",
    "@remix-run/eslint-config": "2.3.1",
    "@types/bcryptjs": "^2.4.6",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/node": "^20.9.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.38.0",
    "prisma": "^5.5.2",
    "tailwindcss": "^3.3.5",
    "tsx": "^4.1.1",
    "typescript": "^5.2.2"
  },
  "engines": {
    "node": ">=20.9.0"
  },
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
}

Dockerfile almost unchanged taken from indie stack

# base node image
FROM node:21.3.0-alpine3.17 as base

# Install all node_modules, including dev dependencies
FROM base as deps

WORKDIR /myapp

ADD package.json .npmrc ./
RUN npm install --include=dev

# Setup production node_modules
FROM base as production-deps

WORKDIR /myapp

COPY --from=deps /myapp/node_modules /myapp/node_modules
ADD package.json .npmrc ./
RUN npm prune --omit=dev

# Build the app
FROM base as build

WORKDIR /myapp

COPY --from=deps /myapp/node_modules /myapp/node_modules

ADD prisma .
RUN npx prisma generate

ADD . .
RUN npm run build

# Finally, build the production image with minimal footprint
FROM base

# ENV DATABASE_URL=file:/data/sqlite.db
# ENV PORT="8080"
# ENV NODE_ENV="production"
#
# # add shortcut for connecting to database CLI
# RUN echo "#!/bin/sh\nset -x\nsqlite3 \$DATABASE_URL" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli

WORKDIR /myapp

COPY --from=production-deps /myapp/node_modules /myapp/node_modules
COPY --from=build /myapp/node_modules/.prisma /myapp/node_modules/.prisma

COPY --from=build /myapp/build /myapp/build
COPY --from=build /myapp/public /myapp/public
COPY --from=build /myapp/package.json /myapp/package.json
COPY --from=build /myapp/start.sh /myapp/start.sh
COPY --from=build /myapp/prisma /myapp/prisma
COPY --from=build /myapp/.env.production /myapp/.env

ENTRYPOINT [ "./start.sh" ]

Errors:

...
All migrations have been successfully applied.
+ npm run start

> start
> remix-serve ./build/index.js

Error: Cannot find package 'tailwindcss' imported from /myapp/node_modules/@nextui-org/theme/dist/chunk-5QVKTCUZ.mjs
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

[Plesin]

Hi @127 have you been able to resolve? Im facing the same issue.

[info] Error: Cannot find package 'tailwindcss' imported from /myapp/node_modules/@nextui-org/theme/dist/chunk-JFWA3DGK.mjs
2024-10-31T11:20:45.455 app[7815993a559018] ams [info] at new NodeError (node:internal/errors:405:5) 

[127]

Just upgraded everything possible and the error gone away.
Copied some configs and other scripts from blank new remix instance.

[Plesin]

tailwind was in devDependencies which is removed in the docker file in this step:

RUN npm prune --omit=dev

and so it's not available, I moved it to dependencies and issue solved.