next outputs partial (broken) html in docker, fine outside docker

[dymoo]

Summary

Hey

I am in the process of dockerising my next app and I cannot seem to get it to work. Everything works fine outside docker (dev and build then start).
this is all the HTML output is, as you can see there's no CSS, HTML, head or body. (truncated end)

<meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-100b9e646d9c912e.js"/><script src="/_next/static/chunks/0799d745-6cc0276e2ca7cd14.js" async=""></script><script src="/_next/static/chunks/250-e1095679f609b6a7.js" async=""></script><script src="/_next/static/chunks/main-app-2e713bec6524aa57.js" async=""></script><div class="container mx-auto"><div class="overflow-x-auto w-full items-center justify-center">...

My dockerfile is

# Use the official Node.js 20 Alpine image as the base image
FROM node:20-alpine

ENV NODE_ENV development
ENV NEXT_TELEMETRY_DISABLED 1

# Set the working directory inside the container
WORKDIR /app

# Copy the the application code to the working directory
COPY . .

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile --production=false; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Build and run in prod.
ENV NODE_ENV production

# Build the application using pnpm
RUN pnpm run build

EXPOSE 3000

# Specify the command to run the application
CMD [ "pnpm", "run", "start" ]

I've genuinely ran out of ideas. Ive tried adding removing everything from my next config, .dockerignore, trying different base images, tried yarn, running a shell inside the container to see around, with / without a custom server, downgrading to 14.1, trying latest next version (currently on), different next config output settings, Nothing. -- I've wasted like 5 hours on troubleshooting and I'm stumped!

Any suggestions are appreciated!

Additional information

Dockerignore

node_modules
npm-debug.log
Dockerfile*
docker-compose*
.dockerignore
.git
.gitignore
README.md
LICENSE
.vscode
.next
*.swp
/scripts

Example

No response

[solo-samurai]

hey @dymoo, you can follow this example from next.js
it worked for me. I'm using standalone make sure to update the next config output to standalone as mentioned in the example.

PS (standalone): Sometimes if you build the standalone and then run dev after you might get an error. so I deleted the node-modules and .next folders and it works for me.

[dymoo]

Still doesn't work unfortunately :( -- I have no idea what could be causing this, I've stripped the project down to bare bones and it still doesn't work

[solo-samurai]

maybe share the repo if it's public. also try to clone and run their example and see if that's working for you to get some clue

[dymoo]

Console output

Uncaught Error: Minified React error #418;
Uncaught Error: Minified React error #423;
DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed
DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Uncaught AggregateError

I've removed every single dependency, basically everything from the TSX files?

This ONLY happens in the docker container (I've tried my own as well as nextjs default one) -- Cannot reproduce it on my local machine ?

[dymoo]

2 f--ing days of my life!
"Fixed" it, it's got to be a bug in nextjs.

chased it down to ./app/app/layout.tsx

if the contents of the file is

export default function DashboardLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return children;
}

it breaks everything (only in production)

but if I change it to a JSX file and the contents to

export default function DashboardLayout({
  children
}) {
  return children;
}

it works absolutely fine.

I will report this as a bug in Next,

EDIT: I fixed it in my repo but am unable to reproduce the fix in a example repo? the broken page is still there?
https://github.com/dymoo/next-docker-layoutbroken-example

EDIT 2: #65380

[popovidis]

Also spent 2 days on this fml. Thank you for this solution

[dymoo]

@ maintainers : might be worth adding a throw to this...

[popovidis]

keep in mind this did not happen on version 14 (I have a project where this is not an issue)

also it seems to be that the root layout must be .js and all children layouts must be .jsx...