CSS not linked in built HTML files within a docker container.

[NotTimTam]

Summary

Hi, I am running Next.js 14.1.0 with the App router.

I use a combination of SCSS global files and module files in the project to style everything.

I run a custom express server that serves the Next.js content inside of an API.

When I run in dev mode, or build the app and run in production mode locally, everything works fine, but when I run the app inside of a docker container, the HTML files generated with next build don't link any CSS, even though the CSS files are present inside of .next/static/css.

When a page is served to the client, all content and JS is there and works, but no styles are present.

Thanks

Additional information

Here is my package.json:

{
	"name": "a2j",
	"version": "1.5.0",
	"private": true,
	"scripts": {
		"dev": "npx nodemon server.js",
		"build": "next build",
		"start": "node server.js",
		"lint": "next lint"
	},
	"dependencies": {
		"@next/third-parties": "^14.0.5-canary.38",
		"axios": "^1.5.1",
		"bcryptjs": "^2.4.3",
		"chart.js": "^4.4.0",
		"cors": "^2.8.5",
		"cron": "^3.1.4",
		"dotenv": "^16.3.1",
		"express": "^4.18.2",
		"express-mongo-sanitize": "^2.2.0",
		"express-rate-limit": "^7.1.2",
		"flow.scss": "^1.0.7",
		"jsonwebtoken": "^9.0.2",
		"mongoose": "^7.6.3",
		"next": "^14.1.0",
		"nodemailer": "^6.9.7",
		"nodemailer-mailgun-transport": "^2.1.5",
		"puppeteer": "^21.5.2",
		"react": "latest",
		"react-chartjs-2": "^5.2.0",
		"react-dom": "latest",
		"react-google-recaptcha": "^3.1.0",
		"react-icons": "^4.11.0",
		"sass": "^1.70.0",
		"tedious": "^16.6.1",
		"xlsx": "^0.18.5"
	}
}

Here is my dockerfile:

FROM node:20.10-buster

RUN apt update
RUN apt upgrade -y

WORKDIR /
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
RUN npm run build

CMD ["npm", "run", "start"]

And here is the server file:

//express app setup
const app = require("express")();
const express = require("express");
require("dotenv").config();
const cors = require("cors");
const sanitize = require("express-mongo-sanitize");
const { connectDB } = require("./util/database/connect.js");
const { log, error } = require("./util/server/console.js");
const rateLimit = require("express-rate-limit");
const next = require("next");

// const app = express();
const PORT = process.env.PORT || 80;

//next app setup
//create a check for dev vs production
const dev = process.env.NODE_ENV !== "production";

//there are giant error warning that pop up when in dev, production will just hide them, we should see them if we want to fix them
const nextApp = next({ dev });

//this is a built in next router that will handle All the request made to the server
const handler = nextApp.getRequestHandler();

const limiter = rateLimit({
	windowMs: 1000, // 1 second.
	max: 50, // Limit each IP to 50 requests per `window` (here, per 1 second)
	standardHeaders: true, // Return rate limit info in the `RateLimit-*` headers
	legacyHeaders: false, // Disable the `X-RateLimit-*` headers
});

// middlewares
app.use(express.json());
app.use(cors());
app.use(sanitize());

app.disable("x-powered-by");
app.use(limiter); // Apply the rate limiting middleware to all requests

// Only in dev mode, we return the users IP address.
if (process.env.TRUST_PROXY) app.set("trust proxy", +process.env.TRUST_PROXY);
if (process.env.TRUST_PROXY && dev)
	app.get("/ip", (req, res) =>
		res.status(200).json({
			ip: req.ip,
			message: `Keep increasing the environment TRUST_PROXY value until the returned IP address is your device's IP.`,
			loopback:
				req.ip === "::1"
					? "::1 is the localhost loopback IP address, returned when the machine hosting the server is the same one accessing it. You cannot test for proxies on the machine hosting the server."
					: false,
		})
	);

// API configuration.
const apiVersion = process.env.API_VERSION;
const apiRoute = `/api/v${apiVersion}`;
log(`API v${apiVersion}`);

// Routes
// <removed>

// Connect to the database then start the server.
const startup = async () => {
	// Connect to database.
	await connectDB();

	// Initiate connection manager.
	nextApp.prepare().then(() => {
		app.all("*", (req, res) => handler(req, res));
		app.listen(PORT, (err) => {
			log("Preparing to listen to requests...");
			if (err) {
				error(err);
			} else {
				log(`Server listening on port ${PORT}.`);
			}
		});
	});
};

startup();

[lucastonelli]

Hey, @NotTimTam. I'm having the same issue. How did you fix it?

[NotTimTam]

The issue seems to have been with my deployment tools. My docker configuration worked fine locally but not on the server. If your css won't load in a local docker container it is probably the Docker file. If it won't load on your server it is probably the worker's cache.

[lucastonelli]

Nice, thanks for letting me know. I couldn't find the issue in my case. Running npm run build was enough to replicate this problem. I've chosen to build the project in a CI environment and use the Dockerfile only to copy it to build the image 👀

[a2ir32sg]

I'm facing the same issue. How did you fix it?

When I build without Docker it works well, but when I run build through a Docker, the output does not include the CSS files.

[lucastonelli]

My suggestion, which is a workaround: #61354 (reply in thread) 😆

[Mynk-1]

hi , i am having same issue on react project(all other services are working fine), css is applied to element on on browser but it is not visible.

[NotTimTam]

Use @lucastonelli's solution #61354

If you still have issues, please open a new discussion post, as this one has been closed.

Thanks!