Next.js Parallel Route Application error, default.tsx doesnt show

i have two Parallel Route: @docs, @events.

There was a discrepancy between development and production mode. In dev mode, everything worked fine. Two Parallel Routes’ default.tsx showed and i could move to anywhere by clicking <Link ... />. But after deployed, one of the default.tsx dissapeared. And when I clicked the dashboard button I got Application error: Client side..., Typeerror: e is not iterable.... but when i visited that url manually i could find the page.

Solution

According to chatGPT the problem was Next.js’s build-time optimization, incorrectly removing necessary code in production. Tree Shaking.

It might remove a route or component that is dynamically used. I think Next.js removed one of my Parallel Route because i wasnt ‘actively’ using the components inside it because i was testing with routing first.

I disabled Optimized Loading in next.config.ts and the production mode started working like development mode.

import type { NextConfig } from "next";
const nextConfig: NextConfig = {
	...,
	experimental: {
		disableOptimizedLoading: true, // Disables some optimizations
	},
	output: "standalone", // Ensures all files are included
};

export default nextConfig;