RSC in CSR

import { ReactNode, useContext } from 'react';

import { darkMode } from 'constants/links';

import { ModeContext } from 'providers/ModeProvider';
import { MenuContext } from 'providers/MenuProvider';

import { UserHeader } from 'components/organisms/UserHeader/UserHeader';
import { Header } from 'components/organisms/Header/Header';
import { Aside } from 'components/organisms/Aside/Aside';
import HeadersWrapper from 'components/molecules/HeadersWrapper/HeadersWrapper';

import styles from './SkeletonRootLayout.module.scss';

export const SkeletonRootLayout = ({ children }: { children: ReactNode }) => {
  const { isMode } = useContext(ModeContext);
  const { isMenu } = useContext(MenuContext);

  console.log('isMenu', isMenu);
  return (
    <div className={`${styles.whole__page} ${isMode === darkMode ? 'dark' : ''}`}>
      <HeadersWrapper childrenWrapper={isMenu === 'true' ? <UserHeader /> : <Header />} />

      <div className={styles.container}>
        {isMenu === 'true' && <HeadersWrapper childrenWrapper={<Aside />} />}

        <main
          className={`
            ${isMenu === 'true' ? styles.user__container : styles.main__container}
            ${isMode === darkMode ? 'main__container--dark' : ''}
          `}>
          <section className={styles.workspace}>{children}</section>
        </main>
      </div>
    </div>
  );
};



//ERROR

./locales/server.ts
'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.

The error was caused by importing 'next-international/dist/app/server/index.js' in './locales/server.ts'.

Import trace for requested module:
  ./locales/server.ts
  ./components/organisms/UserHeader/UserHeader.tsx
  ./components/organisms/SkeletonRootLayout/SkeletonRootLayout.tsx
  ./providers/GlobalProvider.tsx