next-intl "Invalid regular expression: invalid group specifier name" error in production with custom locale handling

[newme616]

Hi there,

I'm using Next.js 15 with next-intl 4.3.4 and Next-Auth, where I store user locales in the database and retrieve them via a custom getUserLocale() function instead of using URL-based locale routing.

My current setup:
next.config.js: Uses createNextIntlPlugin('./src/i18n/request.ts')
src/i18n/request.ts: Custom getRequestConfig() that calls getUserLocale() from the database/cookies
No middleware.ts: Since I don't use locale-based routing (no /en/ or /de/ in URLs)
No src/i18n/routing.ts: Missing this file entirely
This works perfectly in my local development environment, but in production I'm getting this error for some users:

The error appears to be related to regex patterns that next-intl generates internally, possibly due to missing routing configuration that next-intl 4.x expects.

Questions:
Is it possible to use next-intl 4.x without locale-based routing (no /en/, /de/ URL segments) and without middleware?
Do I need to create src/i18n/routing.ts even if I'm not using URL-based locale routing?
Could the missing middleware be causing next-intl to generate invalid regex patterns in production environments?
Is there a recommended way to handle database-stored user locales with next-intl 4.x without URL-based routing?

I suspect the issue might be that next-intl 4.x expects the new routing configuration even when not using URL-based locales, but I'd like to confirm the correct approach.

[amannn]

Hey! Yep, it's absolutely possible to use next-intl 4 without locale-based routing by following the App Router setup. No routing.ts, no middleware etc.—just retrieving and returning your locale from getUserLocale in request.ts.

The error appears to be related to regex patterns that next-intl generates internally, possibly due to missing routing configuration that next-intl 4.x expects.

Do you have any idea where that message comes from?

[newme616]

wow thx for the fast answer! Not really trying to reproduce now. Very odd!

[newme616]

It seems to me the error was:

Failed to call `useTranslations` because the context from `NextIntlClientProvider` was not found.

This can happen because:
1) You intended to render this component as a Server Component, the render
   failed, and therefore React attempted to render the component on the client
   instead. If this is the case, check the console for server errors.
2) You intended to render this component on the client side, but no context was found.
   Learn more about this error here: https://next-intl.dev/docs/environments/server-client-components#missing-context

src/components/v2/branding/shared/EditableDataDisplayCard.tsx (50:27) @ EditableDataDisplayCard


  48 |   reference
  49 | }: EditableDataDisplayCardProps) {
> 50 |   const t = useTranslations('EditableCard');
     |                           ^
  51 |   const styles = sectionStyles[sectionKey] || sectionStyles.default || {};
  52 |   const textColor = styles.textColor || 'text-slate-800';
  53 |   const bgColor = styles.bgColor || 'bg-slate-50';

It seems though this just happens irreguraly.

I try now to wrap the provider (seems weird as the messages are passed down)

'use client';

import { NextIntlClientProvider, type AbstractIntlMessages } from 'next-intl';

export default function IntlErrorHandlingProvider({
  children,
  locale,
  messages
}: {
  children: React.ReactNode;
  locale: string;
  messages: AbstractIntlMessages;
}) {
  return (
    <NextIntlClientProvider
      locale={locale}
      messages={messages}
      onError={error => console.error(error)}
      getMessageFallback={({ namespace, key }) => `${namespace}.${key}`}
    >
      {children}
    </NextIntlClientProvider>
  );
}

In the example you have a duplicate provider? is this intentional?
https://next-intl.dev/docs/usage/configuration#nextintlclientprovider-non-serializable-props

import {NextIntlClientProvider} from 'next-intl';
import {getLocale} from 'next-intl/server';
import IntlErrorHandlingProvider from './IntlErrorHandlingProvider';
 
export default async function RootLayout({children}) {
  const locale = await getLocale();
 
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>
          <IntlErrorHandlingProvider>{children}</IntlErrorHandlingProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Thank you for your help!