getting HMR error when trying to use a Context in the layout

[golden ridge]

I have two different layouts, one for Personal Accounts and one for Team Accounts

So in general terms I have a a ContextProvider with 'use client' that fetches some data,

I pass either userId or accountId to it from the layout.tsx , either for personal accounts and team accounts.
Then the idea is that the personal accounts or team accounts reuse some components across different pages , those components get some data from the useContext, that returns associated data with that account Id. But I am getting this error constantly.

Maybe would be better if I pass just the accountId from each page, and use a useQuery fn to fetch the data, in each component ?

[manic ginkgo]

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)

[nova scroll]

could you share some of your code?

[golden ridge]

sure

i`mport { use } from 'react';

import { If } from '@kit/ui/if';
import {
Page,
PageMobileNavigation,
PageNavigation,
} from '@kit/ui/page';
import { AppLogo } from '~/components/app-logo';
import { withI18n } from '~/lib/i18n/with-i18n';
import { HomeMobileNavigation } from './_components/home-mobile-navigation';
import { HomeSidebar } from './_components/home-sidebar';
import { loadUserWorkspace } from './_lib/server/load-user-workspace';
import { AccountContextProvider } from '../../../lib/_contexts/AccountContextProvider';

export const dynamic = 'force-dynamic'

function UserHomeLayout({ children }: React.PropsWithChildren) {

const workspace = use(loadUserWorkspace());

const style = 'sidebar';
const userId = workspace?.user?.id;

return (

  <Page style={style}>
    
    
    <PageNavigation>


      <If condition={style === 'sidebar'}>
        <HomeSidebar workspace={workspace} />
      </If>
    </PageNavigation>

    <PageMobileNavigation className={'flex items-center justify-between'}>
      <AppLogo />
      <HomeMobileNavigation workspace={workspace} />
    </PageMobileNavigation>
    <AccountContextProvider accountId={userId}>  ----> SERVER COMPONENT 
      {children}
    </ AccountProvider>
  </Page>

);
}

export default withI18n(UserHomeLayout);

/`

/`///////////////////////

"use server";

const AccountContextProvider = async ({ children, accountId }: {children: React.ReactNode, accountId: string}) => {

const client = getSupabaseServerComponentClient();
const api = createAccountsApi(client);

if (!accountId) {
throw new Error('No account id found');
}

const [projects, campaigns] = await Promise.all([
api.getAccountProjects({ accountId }),
api.getAccountCampaigns({ accountId }),
]);

const accountData = {
projects,
campaigns
}

return (
  <AccountProviderWrapper accountData={accountData} >
    {children}
  </AccountProviderWrapper>
);

}
export { AccountContextProvider };

/////////////////////////

'use client';
import React, { createContext } from 'react';

// Types
import { AccountDataType } from '@/types/index';

interface AccountContextType {
accountData: AccountDataType;
}

export const AccountContext = createContext<AccountContextType | undefined>(undefined);

interface AccountProviderProps {
children: React.ReactNode;
accountData: AccountDataType;
}

export const AccountProvider: React.FC<AccountProviderProps> = ({ children, accountData }) => {

return (
<AccountContext.Provider value={{accountData}}>
{children}
</AccountContext.Provider>);
};

`

[nova scroll]

a small note, it would be better if you use code fences for code blocks:

export default function MyPage() {
  return <p>Hello world!</p>;
}

aanyway, this file shouldn't use "use server";, you don't use it to treat components as RSCs, it's treated as an RSC by default as long as the parent component is not a client component (see https://nextjs.org/docs/app/building-your-application/rendering/server-components#using-server-components-in-nextjs)