What is the proper way to use shared state using `createActorContext` in NextJS13+ compatible with SSR layouts? #5185

llamerr · 2025-02-02T13:17:23Z

llamerr
Feb 2, 2025

I have my root layout file that have other providers in it:

import '@/styles/global.css';

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import { NextIntlClientProvider } from 'next-intl';
import { getMessages, setRequestLocale } from 'next-intl/server';

import { QueryProvider } from '@/components/query-providers';
import { ThemeProvider } from '@/components/theme-provider';
import { Env } from '@/libs/Env';
import { routing } from '@/libs/i18nNavigation';
import { filterMachine, initialFilterState } from '@/state/FilterMachine';
import { FilterMachineContext } from '@/state/FilterMachineContext';

import { MSWProvider } from './msw-provider';

if (process.env.NEXT_RUNTIME === 'nodejs') {
  import('@/mocks/node').then(async ({ server }) => {
    server.listen({
      onUnhandledRequest(request, print) {
        if (Env.NEXT_PUBLIC_API_URL && request.url.startsWith(Env.NEXT_PUBLIC_API_URL)) {
          print.warning();
        }
      },
    });
  });
}

const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'swap',
  variable: '--font-inter',
});

export const metadata: Metadata = {
  ...
};

export function generateStaticParams() {
  return routing.locales.map(locale => ({ locale }));
}

export default async function RootLayout(props: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await props.params;

  if (!routing.locales.includes(locale)) {
    notFound();
  }

  setRequestLocale(locale);

  // Using internationalization in Client Components
  const messages = await getMessages();

  // The `suppressHydrationWarning` attribute in <body> is used to prevent hydration errors caused by Sentry Overlay,
  // which dynamically adds a `style` attribute to the body tag.

  return (
    <html lang={locale} className={`${inter.variable} font-sans`} suppressHydrationWarning>
      <body suppressHydrationWarning>
        <NextIntlClientProvider
          locale={locale}
          messages={messages}
        >
          <ThemeProvider ...>
            <MSWProvider>
              <QueryProvider>
                <FilterMachineContext.Provider
                  logic={filterMachine}
                  options={{
                    input: initialFilterState({}),
                  }}
                >
                  {props.children}
                </FilterMachineContext.Provider>
              </QueryProvider>
            </MSWProvider>
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

I have my Provider component that looks like this:

'use client';
import { createActorContext } from '@xstate/react';

import { filterMachine } from './FilterMachine';

export const FilterMachineContext = createActorContext(filterMachine);

I made it client component because nextjs was complaining ⨯ TypeError: createContext only works in Client Components.

But when I try to add my FilterMachineContext.Provider, I get these two errors:

Console Error

[ Server ] React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

RootLayout
./src/app/%5Blocale%5D/layout.tsx

and

Unhandled Runtime Error

[ Server ] Error: Maximum call stack size exceeded

Am I doing something wrong? Is there a fully working example using NextJS somewhere, that uses shared context? I need my filter on products list page, but I also want to use it inside my header component, hence I'm trying to make context global, on top of general layout.

Do I need to include it with some check for server/client sides, like I did for mswjs? It has separate code to handle server and client sides. I took it somewhere from mswjs docs if I recall correctly and it looks like this:

'use client';

import { Suspense, use } from 'react';

import { Env } from '@/libs/Env';
import { mockHandlers } from '@/services/api/mockHandlers';

const mockingEnabledPromise
  = typeof window !== 'undefined'
    ? import('@/mocks/browser').then(async ({ worker }) => {
      await worker.start({
        onUnhandledRequest(request, print) {
          if (Env.NEXT_PUBLIC_API_URL && request.url.startsWith(Env.NEXT_PUBLIC_API_URL)) {
            print.warning();
          }
        },
      });
      worker.use(...mockHandlers);

      // eslint-disable-next-line no-console
      console.log(worker.listHandlers());
    })
    : Promise.resolve();

export function MSWProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // If MSW is enabled, we need to wait for the worker to start,
  // so we wrap the children in a Suspense boundary until it's ready.
  return (
    <Suspense fallback={null}>
      <MSWProviderWrapper>{children}</MSWProviderWrapper>
    </Suspense>
  );
}

function MSWProviderWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  use(mockingEnabledPromise);
  return children;
}

Tried to search for existing solutions on github, but so far did not find anything useful. Will continue to look further of course, I bet there are projects that use it for case similar to mine.

davidkpiano · 2025-03-10T14:46:46Z

davidkpiano
Mar 10, 2025
Maintainer

Apologies for the delay - can you make a reproduction (e.g. on StackBlitz) for this?

1 reply

llamerr Mar 12, 2025
Author

Thanks for the response!

I'm not working on that project for the moment, so it may take some time to isolate some small reproduction suitable for stackblitz (tried simply deploying my repo there, but it failed with some error I'm not ready to check right now). I'm going to make some small isolated example there once I have time, hopefully this week.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What is the proper way to use shared state using `createActorContext` in NextJS13+ compatible with SSR layouts? #5185

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

What is the proper way to use shared state using createActorContext in NextJS13+ compatible with SSR layouts? #5185

llamerr Feb 2, 2025

Replies: 1 comment · 1 reply

davidkpiano Mar 10, 2025 Maintainer

llamerr Mar 12, 2025 Author

What is the proper way to use shared state using `createActorContext` in NextJS13+ compatible with SSR layouts? #5185

llamerr
Feb 2, 2025

Replies: 1 comment 1 reply

davidkpiano
Mar 10, 2025
Maintainer

llamerr Mar 12, 2025
Author