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

Unanswered

hf_david posted this in #help-forum

2024-08-20T13:09:44.199Z

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 ?

6 Replies

iyxan23

2024-08-20T14:03:57.480Z

could you share some of your code?

@iyxan23 could you share some of your code?

hf_davidOP

2024-08-20T19:42:29.549Z

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

@hf_david 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); /`

iyxan23

2024-08-21T04:01:20.085Z

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)

also, where did this AccountProviderWrapper come from?