Next.js Discord

Discord Forum

Path loads bundle from different route group

Unanswered
Large oak-apple gall posted this in #help-forum
Open in Discord
Avatar
Large oak-apple gallOP
I have app with following structure:
src/app/
- (app)
- (payload)

Home / page belongs to (app), admin panel /admin belongs to (payload).
But for some reason / loads bundle from /admin too.
Build script results show that everything is normal (/ is 100kb, /admin is 500kb, while actual / loads 500kb).

And I struggle to identify reason for that.
- at first it was caused by line ending. Switching from crlf to lf fixed it, from lf to crlf broke it. But as soon as I migrated all components to lf, it stopped fixing
- then having any component with props nested under 'container' (global class) caused it. I removed all 'container' class from layout and home page, it stopped fixing
- now even simply having null component without any props causes it

It gets worse with each attempt to fix it. Where should I look to troubleshoot it?
I will update post with more info if needed

UPD: real reason is Link component, even if none of them point to /admin

11 Replies

Avatar
Large oak-apple gallOP
I think I found problem. It is caused by Link component. Changing it to a tag fixes it, but it is not right solution...
Avatar
Alfonsus Ardani
<Link> component might be the right solution since it preloads any link you have on / which might load /admin too for quick navigation
Avatar
Large oak-apple gallOP
For test I removed all Link. Made sure nothing points at /admin, wrong bundle is not loaded. Then added only one that points to / as well. And it still loads wrong bundle
Avatar
Alfonsus Ardani
So you have <Link> that points to / at /?
Avatar
Large oak-apple gallOP
Yes
Avatar
Alfonsus Ardani
hjmm the bundler might naively loads all sorts of bundle then :thinkingdown:
Avatar
Large oak-apple gallOP
How to fix it then?
Avatar
Alfonsus Ardani
im not sure
Avatar
Large oak-apple gallOP
I removed everything from root layout and left only Link.
This is how code looks like.
And image is source code on first request. Marked scripts are bundle from /admin that loads on empty / page
import './globals.css'
import Link from 'next/link'
import type { ReactNode } from 'react'

export default function RootLayout({
    children,
}: Readonly<{
    children: ReactNode
}>) {
    return (
        <html lang="ru">
            <body>
                <Link href="/">Hello</Link>
            </body>
        </html>
    )
}
Image
Avatar
Large oak-apple gallOP
Updated to 15.1.0 and reinstalled all packages, same issue
Avatar
Large oak-apple gallOP
So what exactly is it? Cursed project?