ModalProvider breaks the layout

Answered

Birman posted this in #help-forum

Open in Discord

BirmanOP

2025-03-23T20:41:03.465Z

Hi everyone, I'm a bit of a noob who is trying to write a web application based on tutorials. I added a navigation on the left, and I wanted to add a CreateServerModal modal that will be opened by clicking on the “+” button from the same navigation on the left. But here's the problem, when I add <ModalProvider /> inside RootLayout, I get an error like on the second screen and the navigation on the left is not displayed. What can be the problem?

here's ModalProvider code:
"use client";

import { CreateServerModal } from "@/components/modals/create-server-modal";

import { useEffect, useState } from "react";

export const ModalProvider = () => {
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
setIsMounted(true);
}, []);

if (!isMounted) {
return null;
}

return (
#Unknown Channel
<CreateServerModal />
</>
)
};

Answered by Birman

I FOUND THE REAL SOLUTION

If you are having an issue with disappearing navbar & sidebar upon leaving the server, deleting the server etc.

You can fix this by moving UploadThing's styles into global.css at the end of the file instead of in the react component.

Step 1:
- Remove the import for upload-thing styles inside file-upload.tsx component
- DELETE => import "@uploadthing/react/styles.css";

Step 2:
- Add the import at the bottom of the globals.css file instead

// globals.css
...
@import "~@uploadthing/react/styles.css";

Step 3 (optional):
- Wrap the tailwind config with "withUt":

// tailwind.config.js

const { withUt } = require("uploadthing/tw");
module.exports = withUt({
...leave everything the same
});

View full answer

102 Replies

@Birman Hi everyone, I'm a bit of a noob who is trying to write a web application based on tutorials. I added a navigation on the left, and I wanted to add a CreateServerModal modal that will be opened by clicking on the “+” button from the same navigation on the left. But here's the problem, when I add <ModalProvider /> inside RootLayout, I get an error like on the second screen and the navigation on the left is not displayed. What can be the problem? here's ModalProvider code: "use client"; import { CreateServerModal } from "@/components/modals/create-server-modal"; import { useEffect, useState } from "react"; export const ModalProvider = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) { return null; } return ( <> <CreateServerModal /> </> ) };

2025-03-23T21:00:35.670Z

Hi, I'd appreciate it if you could show me more code for your ModalProvider-related components.

- Code
- How to import
- Parent component

I think the error is partly how you've defined the exports in your modules. I'd like to verify this.

Abyssinian

2025-03-23T21:05:35.522Z

hey

@Losti! Hi, I'd appreciate it if you could show me more code for your ModalProvider-related components. - Code - How to import - Parent component I think the error is partly how you've defined the exports in your modules. I'd like to verify this.

BirmanOP

2025-03-23T21:06:06.117Z

Hello!

use-modal-store.ts file from hooks folder:

import { create } from 'zustand';

export type ModalType = "createServer";

interface ModalStore {
    type: ModalType | null;
    isOpen: boolean;
    onOpen: (type: ModalType) => void;
    onClose: () => void;
}

export const useModal = create<ModalStore>((set) => ({
    type: null,
    isOpen: false,
    onOpen: (type) => set({ isOpen: true, type }),
    onClose: () => set({ type: null, isOpen: false })
}));

modal-provider.tsx

"use client";

import { CreateServerModal } from "@/components/modals/create-server-modal";

import { useEffect, useState } from "react";

export const ModalProvider = () => {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        setIsMounted(true);
      }, []);
    
      if (!isMounted) {
        return null;
      }    

    return (
      <>
        <CreateServerModal />
      </>
    )
  };

@Losti! Hi, I'd appreciate it if you could show me more code for your ModalProvider-related components. - Code - How to import - Parent component I think the error is partly how you've defined the exports in your modules. I'd like to verify this.

Abyssinian

2025-03-23T21:06:21.673Z

can you help me with a few things? sorry for replying in this ticket. i'm very new to nextjs

@Birman Hi everyone, I'm a bit of a noob who is trying to write a web application based on tutorials. I added a navigation on the left, and I wanted to add a CreateServerModal modal that will be opened by clicking on the “+” button from the same navigation on the left. But here's the problem, when I add <ModalProvider /> inside RootLayout, I get an error like on the second screen and the navigation on the left is not displayed. What can be the problem? here's ModalProvider code: "use client"; import { CreateServerModal } from "@/components/modals/create-server-modal"; import { useEffect, useState } from "react"; export const ModalProvider = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) { return null; } return ( <> <CreateServerModal /> </> ) };

Abyssinian

2025-03-23T21:06:40.339Z

i'm new to next

can i ask a question?

where is the page.tsx

for the / route

@Losti! Hi, I'd appreciate it if you could show me more code for your ModalProvider-related components. - Code - How to import - Parent component I think the error is partly how you've defined the exports in your modules. I'd like to verify this.

BirmanOP

2025-03-23T21:08:16.393Z

2025-03-23T21:08:36.486Z

That's simple, you have to read:
https://nextjs.org/docs/app/building-your-application/routing/route-groups

But in summary, within the path group, any file that is page.tsx the path segment "/" as long as it is not inside a directory.

Sorry, I see it now saya.

BirmanOP

2025-03-23T21:09:08.907Z

root layout.tsx

import "./globals.css";
import type { Metadata } from "next";
import { Open_Sans } from "next/font/google";
import { ClerkProvider } from '@clerk/nextjs';
import { enUS } from '@clerk/localizations';

import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/providers/theme-provider";
import { ModalProvider } from "@/components/providers/modal-provider";

const font = Open_Sans({
  subsets: ['latin']
});

export const metadata: Metadata = {
  title: "Khabar App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider localization={localization} >
      <html lang="en" suppressHydrationWarning>
        <body className={cn(
          font.className,
          "bg-white dark:bg-[#0F172B]"
        )}>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
            enableSystem={false}
            storageKey="khabar-theme"
          >
            <ModalProvider />
            {children}
          </ThemeProvider>

        </body>
      </html>
    </ClerkProvider>
  );
}

navigation-action.tsx

"use client";

import { Plus } from "lucide-react";

import { ActionTooltip } from "@/components/action-tooltip";
import { useModal } from "@/hooks/use-modal-store";

export const NavigationAction = () => {
    const { onOpen } = useModal();

    return (
        <div>
            <ActionTooltip side="right" align="center" label="New server">
                <button 
                    onClick = {() => onOpen("createServer")}
                    className="group flex items-center">
                    <div className="flex mx-3 h-[48px] w-[48px] rounded-[24px] group-hover:rounded-[16px] transition-all overflow-hidden items-center justify-center bg-slate-50 dark:bg-slate-700 group-hover:bg-orange-500">
                        <Plus
                            className="group-hover:text-white transition text-orange-500"
                            size={25}
                        />
                    </div>
                </button> 
            </ActionTooltip>
        </div>
    )
}

@Losti! Sorry, I see it now saya.

BirmanOP

2025-03-23T21:14:11.922Z

I can translate create-server-modal.tsx for you that I already sent if you need 🙂

I was just following this tutorial. timecode is 2:50:00
https://www.youtube.com/watch?v=ZbX4Ok9YX94

Abyssinian

2025-03-23T21:15:08.142Z

if i place not-found.tsx in (error)

@Birman I can translate create-server-modal.tsx for you that I already sent if you need 🙂

2025-03-23T21:22:46.984Z

I'm looking at it, and it seems to me that we both missed a small detail.

I assumed your root layout was well-defined, but you have a variable that doesn't exist, I don't think. You use it in your root layout:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider localization={localization /* this variable */}>
      <html lang="en" suppressHydrationWarning>
        <body className={cn(font.className, "bg-white dark:bg-[#0F172B]")}>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
            enableSystem={false}
            storageKey="khabar-theme"
          >
            <ModalProvider />
            {children}
          </ThemeProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}

But in your imports this does not exist.

import "./globals.css";
import type { Metadata } from "next";
import { Open_Sans } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";
import { enUS } from "@clerk/localizations";

import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/providers/theme-provider";
import { ModalProvider } from "@/components/providers/modal-provider";

At no time do you import location

BirmanOP

2025-03-23T21:25:10.952Z

you mean this part?

const localization = {
...enUS,
signUp: {
start: {
title: 'Жаңа аккаунт',
subtitle: '{{applicationName}} жалғастыру үшін тіркелу керек',
actionText: 'Аккаунт бар ма?',
actionLink: 'Кіру',
},
emailLink: {
title: 'Поштаңызды растаңыз',
subtitle: '{{applicationName}} жалғастыру үшін',
resendButton: 'Хат алмадыңыз ба? Қайта жіберу',
},
},

dividerText: 'немесе',
formFieldLabelusername: 'Пайдаланушы аты',
formFieldLabelemailAddress: 'Пошта',
formFieldInputPlaceholderemailAddress: 'Поштаңызды енгізіңіз',
formFieldLabelpassword: 'Құпия сөз',
formFieldInputPlaceholderpassword: 'Құпия сөзді енгізіңіз',
formButtonPrimary: 'Жалғастыру',
formFieldLabelemailAddress_username: 'Пошта немесе пайдаланушы аты',
formFieldInputPlaceholder__emailAddress_username: 'Пошта немесе пайдаланушы атын енгізіңіз',
socialButtonsBlockButton: '{{provider|titleize}} арқылы кіру',
form_param_format_invalid: 'Енгізілген сөз қате форматта. Тексеріп, түзетіңіз.',

signIn: {
start: {
actionLink: 'Тіркелу',
actionText: 'Аккаунт жоқ па?',
subtitle: 'Қош келдіңіз! Жалғастыру үшін аккаунтыңызға кіріңіз',
subtitleCombined: undefined,
title: '{{applicationName}} кіру',
},
}
};

it's just discord won't let me send long messages

2025-03-23T21:26:08.423Z

Try this.

import { enUS as localization } from "@clerk/localizations";

@Birman it's just discord won't let me send long messages <:fine:753870958363803719>

2025-03-23T21:26:27.712Z

Don't worry

@Birman you mean this part? const localization = { ...enUS, signUp: { start: { title: 'Жаңа аккаунт', subtitle: '{{applicationName}} жалғастыру үшін тіркелу керек', actionText: 'Аккаунт бар ма?', actionLink: 'Кіру', }, emailLink: { title: 'Поштаңызды растаңыз', subtitle: '{{applicationName}} жалғастыру үшін', resendButton: 'Хат алмадыңыз ба? Қайта жіберу', }, }, dividerText: 'немесе', formFieldLabel__username: 'Пайдаланушы аты', formFieldLabel__emailAddress: 'Пошта', formFieldInputPlaceholder__emailAddress: 'Поштаңызды енгізіңіз', formFieldLabel__password: 'Құпия сөз', formFieldInputPlaceholder__password: 'Құпия сөзді енгізіңіз', formButtonPrimary: 'Жалғастыру', formFieldLabel__emailAddress_username: 'Пошта немесе пайдаланушы аты', formFieldInputPlaceholder__emailAddress_username: 'Пошта немесе пайдаланушы атын енгізіңіз', socialButtonsBlockButton: '{{provider|titleize}} арқылы кіру', form_param_format_invalid: 'Енгізілген сөз қате форматта. Тексеріп, түзетіңіз.', signIn: { start: { actionLink: 'Тіркелу', actionText: 'Аккаунт жоқ па?', subtitle: 'Қош келдіңіз! Жалғастыру үшін аккаунтыңызға кіріңіз', subtitleCombined: undefined, title: '{{applicationName}} кіру', }, } };

2025-03-23T21:27:25.971Z

Can you see if what clerkprovider expects is the full localization variable?

(I haven't used clerk)

BirmanOP

2025-03-23T21:28:04.883Z

it shows this error

@Birman it shows this error

2025-03-23T21:28:29.199Z

oh my bad

BirmanOP

2025-03-23T21:29:13.153Z

https://clerk.com/docs/customization/localization

2025-03-23T21:29:45.857Z

I'm looking at it right now, so it has nothing to do with the provider.

@Losti! Can you see if what clerkprovider expects is the full localization variable? <:this_is_fine:770004314634321971>

BirmanOP

2025-03-23T21:30:15.032Z

you think navigation isn't displaying because of clerk?

@Losti! I'm looking at it right now, so it has nothing to do with the provider.

BirmanOP

2025-03-23T21:30:21.961Z

oh

@Birman you think navigation isn't displaying because of clerk?

2025-03-23T21:32:48.777Z

Clerk is working as expected, right? It provides language-based routing and all that...? If so, it has nothing to do with the problem you're having.

@Losti! Clerk is working as expected, right? It provides language-based routing and all that...? If so, it has nothing to do with the problem you're having.

BirmanOP

2025-03-23T21:34:30.371Z

yes, it's working well

Abyssinian

2025-03-23T21:36:29.040Z

whats the problem

i'm new but i can help

frfr

@Abyssinian i'm new but i can help

BirmanOP

2025-03-23T21:37:55.404Z

well when i add <ModalProvider /> inside my root layout.tsx, navigation on the left side disappeares

but when i remove <ModalProvider /> navigation appears again

Abyssinian

2025-03-23T21:39:13.463Z

girl 😭 🙏

i come from react

i'm very new to this

but

i'd say

shadcn dialogs

@Abyssinian girl 😭 🙏

BirmanOP

2025-03-23T21:39:40.164Z

oh thank u anyway 😭

@Birman oh thank u anyway 😭

Abyssinian

2025-03-23T21:39:43.556Z

https://ui.shadcn.com/docs/components/alert-dialog

https://ui.shadcn.com/docs/components/dialog

always did the modals in my apps that way too

but it way always werid and messy

@Abyssinian but it way always werid and messy

BirmanOP

2025-03-23T21:40:28.889Z

thx!

@Birman Click to see attachment

2025-03-23T21:40:32.616Z

It's strange behavior.

@Abyssinian shadcn dialogs

2025-03-23T21:40:45.230Z

They are very helpful

@Losti! It's strange behavior.

BirmanOP

2025-03-23T21:41:01.217Z

yes, i did everything like in the video tutorial

idk what's wrong...

2025-03-23T21:41:26.744Z

I don't understand. If they're components made from scratch, there must be something there that's causing a conflict with the content. I assumed you were using shadcn.

BirmanOP

2025-03-23T21:41:52.134Z

i am using shdcn fot ui

here in create-server-modal.tsx

2025-03-23T21:42:52.949Z

So this problem shouldn't be happening, since the dialog is set to false, the content isn't displayed at all.

By default you have it set to false, it should not affect the interface.

BirmanOP

2025-03-23T21:43:47.769Z

yess

2025-03-23T21:44:25.495Z

Can you check the dev tools and see if your sidebar has moved in a strange way?

They make it easy for you to see that kind of behavior.

@Losti! They make it easy for you to see that kind of behavior.

BirmanOP

2025-03-23T21:46:23.473Z

chatgpt said i can ignore these warnings idk

2025-03-23T21:47:28.173Z

What we need to see is if the sidebar is rendered in the HTML and where it is.

If the position of the sidebar is outside the window we will know it and we will also be able to see the possible causes due to the HTML

@Losti! If the position of the sidebar is outside the window we will know it and we will also be able to see the possible causes due to the HTML

BirmanOP

2025-03-23T21:49:56.644Z

hm

Abyssinian

2025-03-23T21:50:14.691Z

ello

yal got progress?

@Abyssinian yal got progress?

BirmanOP

2025-03-23T21:51:17.037Z

nah

Abyssinian

2025-03-23T21:51:23.651Z

oo

rip

i'm not a help):

@Losti! What we need to see is if the sidebar is rendered in the HTML and where it is.

BirmanOP

2025-03-23T21:51:37.169Z

where should i look for it? 😭

Abyssinian

2025-03-23T21:51:44.175Z

https://tenor.com/view/the-funny-still-developing-the-funny-angry-birds-pigs-were-still-developing-the-funny-go-do-something-else-gif-25732477

BirmanOP

2025-03-23T21:53:41.069Z

here's main layout.tsx

import { NavigationSidebar } from "@/components/navigation/navigation-sidebar";

const MainLayout = async ({
children
}: {
children: React.ReactNode;
}) => {
return (
<div className="h-full">
<div className="hidden md:flex h-full w-[72px] z-30 flex-col fixed inset-y-0">
<NavigationSidebar />
</div>
<main className="md:pl-[72px] h-full">{children}</main>
</div>
);
}

export default MainLayout;

@Birman where should i look for it? 😭

2025-03-23T21:53:44.287Z

In Elements, find your sidebar's container. Selecting the HTML tag should show you where it's located on the screen. If you're using Flex or Grid, you can highlight it with a small button (click it and it will add a border to the container box) next to the open HTML tag.

This will highlight the element.

I just want to know if the sidebar is displayed correctly and where it is when the modal provider exists within the layout. Maybe it's just a styling issue...

@Losti! In Elements, find your sidebar's container. Selecting the HTML tag should show you where it's located on the screen. If you're using Flex or Grid, you can highlight it with a small button (click it and it will add a border to the container box) next to the open HTML tag. This will highlight the element.

BirmanOP

2025-03-23T22:00:04.240Z

look when i remove the check i can see sidebar

should i remove it?

@Birman should i remove it?

2025-03-23T22:03:09.487Z

As long as the viewport size is smaller than md (764px if I'm not mistaken) it will be with display none, it shouldn't affect... even so let's try removing it

try removing inset-y-0 as well

@Losti! As long as the viewport size is smaller than md (764px if I'm not mistaken) it will be with display none, it shouldn't affect... even so let's try removing it

BirmanOP

2025-03-23T22:04:31.184Z

yea now sidebar appeared and modal works when i press "+" button. do you think it won't affect my code in the future if i remove hidden?

@Losti! try removing inset-y-0 as well

BirmanOP

2025-03-23T22:04:38.515Z

okay

@Birman yea now sidebar appeared and modal works when i press "+" button. do you think it won't affect my code in the future if i remove hidden?

2025-03-23T22:06:56.931Z

The idea behind hiding it is to make it scrollable with an animation on the X axis when the screen size is very small. If this is the only problem you're having with your code right now, it's a good idea to use some help.

https://ui.shadcn.com/blocks#sidebar-07

Perhaps try adding this sidebar and modifying it to your liking.

@Losti! The idea behind hiding it is to make it scrollable with an animation on the X axis when the screen size is very small. If this is the only problem you're having with your code right now, it's a good idea to use some help. https://ui.shadcn.com/blocks#sidebar-07

BirmanOP

2025-03-23T22:08:07.480Z

okay! thank you very much! you really helped me, i think now i am gonna read all the docs

@Birman okay! thank you very much! you really helped me, i think now i am gonna read all the docs

Abyssinian

2025-03-23T22:08:22.520Z

ello

w yal

shadcn on top

2025-03-23T22:08:35.857Z

This is what I did in my case; it helped a lot.
I know this doesn't directly solve your problem (and it still seems like a styling issue to me), but I hope it can help relieve this stress you're probably carrying.

@Losti! This is what I did in my case; it helped a lot. I know this doesn't directly solve your problem (and it still seems like a styling issue to me), but I hope it can help relieve this stress you're probably carrying.

BirmanOP

2025-03-23T22:09:04.518Z

yes, i hope so too

2025-03-23T22:09:41.435Z

I'm glad, go ahead, I hope things go well for you saya.

@Losti! I'm glad, go ahead, I hope things go well for you saya.

BirmanOP

2025-03-23T22:10:23.015Z

thank you! good luck to you too!

BirmanOP

2025-04-17T20:30:34.283Z

I FOUND THE REAL SOLUTION

If you are having an issue with disappearing navbar & sidebar upon leaving the server, deleting the server etc.

You can fix this by moving UploadThing's styles into global.css at the end of the file instead of in the react component.

Step 1:
- Remove the import for upload-thing styles inside file-upload.tsx component
- DELETE => import "@uploadthing/react/styles.css";

Step 2:
- Add the import at the bottom of the globals.css file instead

// globals.css
...
@import "~@uploadthing/react/styles.css";

Step 3 (optional):
- Wrap the tailwind config with "withUt":

// tailwind.config.js

const { withUt } = require("uploadthing/tw");
module.exports = withUt({
...leave everything the same
});

Answer

@Birman I FOUND THE REAL SOLUTION If you are having an issue with disappearing navbar & sidebar upon leaving the server, deleting the server etc. You can fix this by moving UploadThing's styles into global.css at the end of the file instead of in the react component. Step 1: - Remove the import for upload-thing styles inside file-upload.tsx component - DELETE => import "@uploadthing/react/styles.css"; Step 2: - Add the import at the bottom of the globals.css file instead // globals.css ... @import "~@uploadthing/react/styles.css"; Step 3 (optional): - Wrap the tailwind config with "withUt": // tailwind.config.js const { withUt } = require("uploadthing/tw"); module.exports = withUt({ ...leave everything the same });

2025-04-17T23:34:32.054Z

Glad you found it, congratulations! :)

@Losti! Glad you found it, congratulations! :)

BirmanOP

2025-04-18T00:03:27.293Z

thx!