Next.js Discord

Discord Forum

weird behavior when using multiple layouts

Unanswered
Dutch posted this in #help-forum
Open in Discord
DutchOP
I have 2 groups (group1) and (group2) with different layouts.tsx files returning #Unknown Channel header, div with {children}</>

I also have a RootLayout in the app folder.

this all works fine when navigating to lages in group1 or group2, but I also have other pages that are just normally in folders within app directly, so: app/routename/page.tsx
When navigating to these pages, there is only raw html, and Im seeing no hydration errors or anything...

tldr:
I have:
- app/(group1)/layout.tsx
- app/(group1)/pagename1/page.tsx
- app/(group2)/layout.tsx
- app/(group12/pagename2/page.tsx
- app/pagename3/page.tsx
- app/layout.tsx

pagename1 and pagename 2 work fine, pagename3 displays raw html.

Am I doing something wrong? (Using tailwindcss btw)

128 Replies

Velvet ant
how is the code of the root layout /app/layout.tsx ?
ASittingDuck
I suspect this has to do with duplicate named or close named groups or routes because that is what happened to me
@Velvet ant how is the code of the root layout `/app/layout.tsx` ?
DutchOP
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body
        className={
          inter.className
        }
      >
        <header>
          <div className="fixed top-0 z-20 w-full">
            <div className="border-sold border-b-[1px] border-b-gray-600 border-opacity-100">
              <Navbar></Navbar>
            </div>
          </div>
        </header>
        <div
          className="pt-[70px] bg-ext_background text-white "
          style={{ minHeight: 'calc(100vh - 0px)' }}
        >
          {children}
        </div>
      </body>
    </html>
  );
}
@ASittingDuck I suspect this has to do with duplicate named or close named groups or routes because that is what happened to me
DutchOP
I only have 2 groups that are not named the same, and I dont have any route that are named the same either
DutchOP
interestingly also, if I go to localhost/pagename3v directly after starting the server, it all looks fine with tailwindcss styling
I can then also go to any of my other pages which are not in a group. only once I navigate to a page that is in a group, if I then go back to one that isnt in a group, its html only.
ASittingDuck
can you show us your tailwind config?
DutchOP
its mostly default
import type { Config } from 'tailwindcss';

const config: Config = {
  // prefix: "tw-",
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/preline/dist/*.js',
  ],
  theme: {
    /* colors: {
      navbar: '#6E6B7A',
    }, */
    extend: {
      colors: {
        ext_streamer: '#8B77D5',
        ext_clipper: '#C2A520',
        ext_navbar: '#6E6B7A',
        ext_background: '#111111',
        ext_primary: '#333333',
        ext_accent: '#8F86B6',
        ext_dark_blue: '#2F01EB',
        ext_card_top: '#7D7A89',
        ext_card_bottom: '#6E6B7A',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      /* fontFamily: {
        'b-font': ['Arial', 'sans-serif'],
      }, */
    },
  },
  plugins: [
    require('daisyui'),
    require('tailwind-scrollbar')({ nocompatible: true }),
    require('@tailwindcss/forms'),
  ],
  daisyui: {
    themes: ['light', 'dark', 'cupcake', 'winter', 'dracula'],
    darkTheme: 'dark', // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ':root', // The element that receives theme color CSS variables
  },
};
export default config;
ASittingDuck
one moment while I look at it
you're not using src are you?
DutchOP
no
also I just realized that the issue is not the case for one of my pages
ASittingDuck
Is this a tailwind.config.ts or tailwind.config.ts?
DutchOP
its tailwind.config.ts
ASittingDuck
and why is node_modules included?
DutchOP
not sure
i dont think I put that there
ASittingDuck
Hmm that is odd, unless you're using a theme library link ant design you shouldn't need that
oh you're using daisyui
DutchOP
I have a page named bounties and the issue never happens there, but since that page is also not in a group just like my signup and login pages, I can navigate between those 3 without the issue happening
BUT
when I go to a page from a group and then back to the signin or login page the issue happens
BUT
ASittingDuck
When did this start happening
DutchOP
not for the bounties page
it happened when I added the groups
with seperate layouts
ASittingDuck
Ok and you're using the app router exclusively right, no page router pages?
DutchOP
yeah
ASittingDuck
Do you have a default layout at all?
DutchOP
yes
thats the rootlayout I posed
ASittingDuck
And that isn't being applied of course with these problem pages right?
DutchOP
no it is
but
no styling
only raw html
ASittingDuck
Ok is the rendered page showing a css stylesheet or a console error?
DutchOP
no error
stylesheet in sources?
ASittingDuck
can I see a layout that isn't being shown as well as the source code for the page itself?
or in the head
DutchOP
the layout does work just no styling
1 sec
ASittingDuck
sorry i just meant the parent layout
DutchOP
the default root layout in my app folder
I already posted
ASittingDuck
Ok that's the root layout right?
DutchOP
yeah
the pages for signup and login are just long forms rly
ASittingDuck
could be anything, mind sharing it hastebin if its too long for here?
DutchOP
https://hastebin.skyra.pw/juyicehaqi.htm
thats app/login/page.tsx
ASittingDuck
looking at it now.
Wait there is no group on this
where is the group in the directory path?
that's what I am looking for
DutchOP
tldr:
I have:
app/(group1)/layout.tsx
app/(group1)/pagename1/page.tsx
app/(group2)/layout.tsx
app/(group12/pagename2/page.tsx
app/pagename3/page.tsx
app/layout.tsx
the group pages which have seperate layouts, they work fine
ASittingDuck
this is your problem
remove that
Velvet ant
are you navigating with classic a tag ?
@Dutch thats app/login/page.tsx
DutchOP
this would be in the pagename3 category, where the issue occurs
@Velvet ant are you navigating with classic a tag ?
DutchOP
no it happens when just navigating by typing in the domain names
@ASittingDuck remove that
DutchOP
this is commented out hastebin just doesnt show that correctly for some reason
ASittingDuck
ok
Show me a problem page, is this one of them?
Velvet ant
I meant this
 <a
    href="./signup"
    className="font-semibold leading-6 text-indigo-400 hover:text-indigo-500"
  >
              Create Account
  </a>
DutchOP
yes, this is one of the pages that if I go there immediately after starting server its fine, but when I then go to a page that is in a (group) and back there is only raw html
@Velvet ant I meant this tsx <a href="./signup" className="font-semibold leading-6 text-indigo-400 hover:text-indigo-500" > Create Account </a>
DutchOP
yeah we're supposed to use link I know, but I dont need to press that for the problem
ASittingDuck
interesting
DutchOP
yeah lmao
imma try to put the problem pages in the groups aswell see if it still happens 1 sec
is it problematic to have 2 headers?
ASittingDuck
kinda
but not from a functionality standpoint, just for valid html
DutchOP
okay so moving /signup into one of the groups fixes the issue
but theoretically if there ARE groups in a project, that doesnt require ALL pages to be in groups I thought
ASittingDuck
That's my understanding
I mean
I don't have any that aren't in groups
Velvet ant
just tried in a fresh project and no issue at all
ASittingDuck
Hmmm its gotta be someting either tailwind config, next.config or tailwind config related
which version of next are you running?
Velvet ant
is there any repo to check ?
DutchOP
latest
@Velvet ant is there any repo to check ?
DutchOP
repo of what
Velvet ant
your project
DutchOP
not rn
I can copy the effected pages out and see if it reproduces then make a repo if it does
ASittingDuck
That is really strange, I have a feeling that I might be able to find it if I could fine tooth comb through the files, but right now I am not sure what other questions to ask
DutchOP
im tryna recreate it in a new project rn, I'll let u know if I can do it
DutchOP
@ASittingDuck @Velvet ant in case ur curious:
https://github.com/NotIPlayForFun/testrepostylingissue
this reproduces the issue
ASittingDuck
I will have to look at that in my local env in a bit
DutchOP
steps:
1. go to localshost/login, then start the server. this will look as it should
2. go to /page1 for example
3. go back to login
4. there should be no styling anymore
also pushed a change to put the root page.tsx into a group

also, noticed that when having a page.tsx in app/ aswell as one in app/(some_group), (whish you obvsly shouldnt) then navigating to localhost/, the same issue comes up where there is only raw html displayed. Could be a similar cause where somehow things are interacting in that same way when having groups aswell as non-group pages? idk
im new to nextjs so idk, but if you dont find the issue either I'd be curious if this is a bug with next itself
Velvet ant
cant reproduce the issue
DutchOP
thats weird
why cant I send a video so that you can just play it direclty
1 second
https://youtu.be/i9hU-Alqz34
there it is
btw the form error is already fixed and got nothing to do with the issue
@Velvet ant cant reproduce the issue
DutchOP
did you do it exactly like in the video?
Velvet ant
yes
but I use pnpm
I dont think thats the issue
DutchOP
Ok
Thats.. weird. Yeah idk lmao
Guess I‘ll just put all my routes in groups and then its fine
Velvet ant
what is your node version ?
@Velvet ant what is your node version ?
DutchOP
version 20.14.0
Velvet ant
can you try in other browser ? maybe an extensions that causes that on your side @Dutch
DutchOP
no same thing on edge and operagx
also worth noting maybe that when I keep the server up, go once to page1 to trigger the bug, then switch browser, and on the new browser immediately go to /login, there is only plain html. So server side issue i guess
Velvet ant
the thing is that I cant reproduce the issue so I guess is something on your side
DutchOP
yeah I suppose
but other than making a new create-next-app with dummy files, idk
end of the day its fixable by putting everything in groups so yeah
Velvet ant
yes you can try with a fresh next app to see if the issue persist, at least we will know if it comes from the project.
DutchOP
i mean thats what I did
@Dutch with this
ASittingDuck
I am going to try with an app to replicate these results, if I get the same thing I say we open up a issue on the nextjs repo