weird behavior when using multiple layouts | Next.js | Page 1

bitter dock Jul 14, 2024, 6:48 PM

#

I have 2 groups (group1) and (group2) with different layouts.tsx files returning <> 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)

simple shoreBOT Jul 14, 2024, 6:48 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

young bone Jul 14, 2024, 8:13 PM

#

how is the code of the root layout /app/layout.tsx ?

covert willow Jul 14, 2024, 8:19 PM

#

I suspect this has to do with duplicate named or close named groups or routes because that is what happened to me

bitter dock Jul 14, 2024, 9:04 PM

#

young bone how is the code of the root layout `/app/layout.tsx` ?

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>
  );
}```

bitter dock Jul 14, 2024, 9:05 PM

#

covert willow I suspect this has to do with duplicate named or close named groups or routes be...

I only have 2 groups that are not named the same, and I dont have any route that are named the same either

#

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.

covert willow Jul 14, 2024, 9:25 PM

#

can you show us your tailwind config?

bitter dock Jul 14, 2024, 9:25 PM

#

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;

covert willow Jul 14, 2024, 9:26 PM

#

one moment while I look at it

#

you're not using src are you?

bitter dock Jul 14, 2024, 9:27 PM

#

no

#

also I just realized that the issue is not the case for one of my pages

covert willow Jul 14, 2024, 9:27 PM

#

Is this a tailwind.config.ts or tailwind.config.ts?

bitter dock Jul 14, 2024, 9:28 PM

#

its tailwind.config.ts

covert willow Jul 14, 2024, 9:28 PM

#

and why is node_modules included?

bitter dock Jul 14, 2024, 9:28 PM

#

not sure

#

i dont think I put that there

covert willow Jul 14, 2024, 9:29 PM

#

Hmm that is odd, unless you're using a theme library link ant design you shouldn't need that

#

oh you're using daisyui

bitter dock Jul 14, 2024, 9:30 PM

#

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

covert willow Jul 14, 2024, 9:30 PM

#

When did this start happening

bitter dock Jul 14, 2024, 9:30 PM

#

not for the bounties page

#

it happened when I added the groups

#

with seperate layouts

covert willow Jul 14, 2024, 9:31 PM

#

Ok and you're using the app router exclusively right, no page router pages?

bitter dock Jul 14, 2024, 9:31 PM

#

yeah

covert willow Jul 14, 2024, 9:31 PM

#

Do you have a default layout at all?

bitter dock Jul 14, 2024, 9:31 PM

#

yes

#

thats the rootlayout I posed

covert willow Jul 14, 2024, 9:31 PM

#

And that isn't being applied of course with these problem pages right?

bitter dock Jul 14, 2024, 9:31 PM

#

no it is

#

but

#

no styling

#

only raw html

covert willow Jul 14, 2024, 9:32 PM

#

Ok is the rendered page showing a css stylesheet or a console error?

bitter dock Jul 14, 2024, 9:32 PM

#

no error

#

stylesheet in sources?

covert willow Jul 14, 2024, 9:32 PM

#

can I see a layout that isn't being shown as well as the source code for the page itself?

#

or in the head

bitter dock Jul 14, 2024, 9:33 PM

#

the layout does work just no styling

#

1 sec

covert willow Jul 14, 2024, 9:33 PM

#

sorry i just meant the parent layout

bitter dock Jul 14, 2024, 9:33 PM

#

the default root layout in my app folder

#

I already posted

bitter dock Jul 14, 2024, 9:33 PM

#

bitter dock ```tsx export default function RootLayout({ children, }: Readonly<{ children...

this

covert willow Jul 14, 2024, 9:34 PM

#

Ok that's the root layout right?

bitter dock Jul 14, 2024, 9:34 PM

#

yeah

#

the pages for signup and login are just long forms rly

covert willow Jul 14, 2024, 9:35 PM

#

could be anything, mind sharing it hastebin if its too long for here?

bitter dock Jul 14, 2024, 9:36 PM

#

https://hastebin.skyra.pw/juyicehaqi.htm

#

thats app/login/page.tsx

covert willow Jul 14, 2024, 9:38 PM

#

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

bitter dock Jul 14, 2024, 9:38 PM

#

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

covert willow Jul 14, 2024, 9:39 PM

#

this is your problem

#

remove that

young bone Jul 14, 2024, 9:39 PM

#

are you navigating with classic a tag ?

bitter dock Jul 14, 2024, 9:39 PM

#

bitter dock thats app/login/page.tsx

this would be in the pagename3 category, where the issue occurs

bitter dock Jul 14, 2024, 9:39 PM

#

young bone are you navigating with classic a tag ?

no it happens when just navigating by typing in the domain names

bitter dock Jul 14, 2024, 9:40 PM

#

covert willow remove that

this is commented out hastebin just doesnt show that correctly for some reason

covert willow Jul 14, 2024, 9:40 PM

#

ok

#

Show me a problem page, is this one of them?

young bone Jul 14, 2024, 9:40 PM

#

I meant this

 <a
    href="./signup"
    className="font-semibold leading-6 text-indigo-400 hover:text-indigo-500"
  >
              Create Account
  </a>

bitter dock Jul 14, 2024, 9:41 PM

#

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

bitter dock Jul 14, 2024, 9:41 PM

#

young bone I meant this ```tsx <a href="./signup" className="font-semibold leading...

yeah we're supposed to use link I know, but I dont need to press that for the problem

bitter dock Jul 14, 2024, 9:41 PM

#

bitter dock yes, this is one of the pages that if I go there immediately after starting ser...

just doing this causes the problem

covert willow Jul 14, 2024, 9:42 PM

#

interesting

bitter dock Jul 14, 2024, 9:42 PM

#

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?

covert willow Jul 14, 2024, 9:43 PM

#

kinda

#

but not from a functionality standpoint, just for valid html

bitter dock Jul 14, 2024, 9:45 PM

#

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

covert willow Jul 14, 2024, 9:45 PM

#

That's my understanding

#

I mean

#

I don't have any that aren't in groups

young bone Jul 14, 2024, 9:46 PM

#

just tried in a fresh project and no issue at all

covert willow Jul 14, 2024, 9:48 PM

#

Hmmm its gotta be someting either tailwind config, next.config or tailwind config related

#

which version of next are you running?

young bone Jul 14, 2024, 9:48 PM

#

is there any repo to check ?

bitter dock Jul 14, 2024, 9:48 PM

#

latest

bitter dock Jul 14, 2024, 9:48 PM

#

young bone is there any repo to check ?

repo of what

young bone Jul 14, 2024, 9:49 PM

#

your project

bitter dock Jul 14, 2024, 9:49 PM

#

not rn

#

I can copy the effected pages out and see if it reproduces then make a repo if it does

covert willow Jul 14, 2024, 9:59 PM

#

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

bitter dock Jul 14, 2024, 10:11 PM

#

im tryna recreate it in a new project rn, I'll let u know if I can do it

bitter dock Jul 14, 2024, 10:30 PM

#

@covert willow @young bone in case ur curious:
https://github.com/NotIPlayForFun/testrepostylingissue

GitHub

GitHub - NotIPlayForFun/testrepostylingissue

Contribute to NotIPlayForFun/testrepostylingissue development by creating an account on GitHub.

#

this reproduces the issue

covert willow Jul 14, 2024, 10:30 PM

#

I will have to look at that in my local env in a bit

bitter dock Jul 14, 2024, 10:31 PM

#

steps:

go to localshost/login, then start the server. this will look as it should
go to /page1 for example
go back to login
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

young bone Jul 14, 2024, 10:43 PM

#

cant reproduce the issue

bitter dock Jul 14, 2024, 10:44 PM

#

thats weird

#

why cant I send a video so that you can just play it direclty

#

1 second

#

https://youtu.be/i9hU-Alqz34

YouTube

SkivvyTV

2024 07 15 00 45 56

▶ Play video

#

there it is

#

btw the form error is already fixed and got nothing to do with the issue

bitter dock Jul 14, 2024, 10:52 PM

#

young bone cant reproduce the issue

did you do it exactly like in the video?

young bone Jul 14, 2024, 10:53 PM

#

yes

#

but I use pnpm

#

I dont think thats the issue

bitter dock Jul 14, 2024, 10:55 PM

#

Ok

#

Thats.. weird. Yeah idk lmao

#

Guess I‘ll just put all my routes in groups and then its fine

young bone Jul 14, 2024, 10:57 PM

#

what is your node version ?

bitter dock Jul 14, 2024, 11:10 PM

#

young bone what is your node version ?

version 20.14.0

young bone Jul 14, 2024, 11:20 PM

#

can you try in other browser ? maybe an extensions that causes that on your side @bitter dock

bitter dock Jul 14, 2024, 11:26 PM

#

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

young bone Jul 14, 2024, 11:34 PM

#

the thing is that I cant reproduce the issue so I guess is something on your side

bitter dock Jul 14, 2024, 11:39 PM

#

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

young bone Jul 14, 2024, 11:43 PM

#

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.

bitter dock Jul 15, 2024, 12:26 AM

#

i mean thats what I did

bitter dock Jul 15, 2024, 12:26 AM

#

bitter dock <@233083663183511553> <@602649452292997130> in case ur curious: https://github.c...

with this

#weird behavior when using multiple layouts