Next.js Discord

Discord Forum

Error: No intl context found. Have you configured the provider?

Unanswered
Maltese posted this in #help-forum
Open in Discord
MalteseOP
I'm trying to apply translation to a project and I have been following this doc https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components but when using | const t = useTranslations(); I get the error above . Anyone know how to solve it

19 Replies

Alligator mississippiensis
Hello, anyone has a solution for this ? I have the same error. For instance, when i add "use client" on top, it doesn't work. Here is the code : 

"use client";

import {NextIntlClientProvider, useMessages} from 'next-intl';
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "../globals.css";

const inter = Inter({ subsets: ["latin"] });

// export const metadata: Metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({children, params: {locale}}: Readonly<{
  children: React.ReactNode;
  params: {locale: string};
}>) {
  const messages = useMessages();

  return (
    <html lang={locale}>
      <body className={inter.className}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}


Unhandled Runtime Error
Error: No intl context found. Have you configured the provider?

Source
app/[locale]/layout.tsx (19:30) @ useMessages

  17 | params: {locale: string};
  18 | }>) {
> 19 | const messages = useMessages();
     |                            ^
  20 |
  21 | return (
  22 |   <html lang={locale}>
Alligator mississippiensis
Ok thanks a lot for you answer ! I get it. But well, what alternative do i have if i need to use the root layout as the client component ?
Clown
You are mixing and matching the setup from the app router and pages router
From what i see from the docs, the app router doesnt need a NextIntlClientProvider in the layout?
The pages router does
Even then your way of fetching the messages seems wrong
@Clown From what i see from the docs, the app router doesnt need a NextIntlClientProvider in the layout?
Alligator mississippiensis
Mmh ! You seem right ! Actually i was getting an error when using the app router doc, so i tried several things and ended up with this error ! I just tried creating a new project and testing the doc again it seems to respond well !

I'll try testing this again on my project later !

THANKS a lot !
Alligator mississippiensis
Hum still not getting this to work on my project ! I don´t get it :
"use client"

//...
import {useTranslations} from 'next-intl';

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({children, params: {locale}}: Readonly<{
  children: React.ReactNode;
  params: {locale: string};
}>) {
  const [user, setUser] = useState(null);

  const t = useTranslations('Index');

  //...

  function context() {
    // console.log(user)
    if (user && user.token && isStillValid()) {
      return <section>
        <Sidebar />

        <div className="md:ml-48">
          <div className="bg-[#fbfdff] p-8">
            <Suspense fallback={Loading}>
              {children}
              {/* {JSON.stringify(user)} */}
            </Suspense>
          </div>
        </div>
      </section>
    } else {
      return <Suspense fallback={Loading}>
        <Security register={register} />
      </Suspense>
    }
  }

  return (
    <html lang={locale}>
      <body className={inter.className}>
        <NextTopLoader />

        <UserContext.Provider value={{ user, setUser }}>
          { context() }
        </UserContext.Provider>
      </body>
    </html>
  );
}
Unhandled Runtime Error
Error: 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-docs.vercel.app/docs/environments/server-client-components#missing-context

Source
app/[locale]/layout.tsx (23:28) @ RootLayout

  21 | const [user, setUser] = useState(null);
  22 |
> 23 | const t = useTranslations('Index');
     |                          ^
  24 |
  25 | const pathname = usePathname()
  26 | let register:boolean = false;


And this is why i ended up following this link https://next-intl-docs.vercel.app/docs/environments/server-client-components#missing-context which tells me to add wrap the code around NextIntlClientProvider leading me to the first error !

Any help appreciated
Clown
You dont call useTranslations inside a client component
Atleast the docs dont suggest this.

Although i know hooks are supposed to be used in client components usually, try using it on server component
Alligator mississippiensis
Hum thank you. I need this component to be a client component as i am using setState. So i don't know how to handle this. Do i have a constraint using the useTranslations only on server components ?
Actually it seems a bit weird to me. Should i understand that i can only use useTranslations to translate the app on server components ?
American Crow
Hm not sure where your problem is. Why is your layout a client component? I am only wrapping the parts client components with NextIntlProvider which actually need it. So i moved it to the leaf as far out as possible. I have it in a page.tsx instead of layout. Should be the same thing though:

This is working for me:

page.tsx (server component)
export default function TestPage({ params }: TestPageProps) {
  
  const { locale } = params

  // Validate that the incoming `locale` parameter is valid
  // unstable_setRequestLocale must be called before any other hooks from next-intl
  if (!locales.includes(locale)) notFound()
  unstable_setRequestLocale(locale)

  const messages = useMessages()
  const { SubCategories } = messages as {
    SubCategories: AbstractIntlMessages | undefined
  }

  return (
    <NextIntlClientProvider messages={SubCategories}>
      <div className="max-w-lg">
        <FantasyNameGenerator subject="Demon" emoji="👹" />
      </div>
    </NextIntlClientProvider>
  )
}

Ignore the unstable_ that's just for static rendering

and
FantasynameGenerator.tsx (client component)
export default function FantasyNameGenerator(props: FantasyNameGeneratorProps) {

  // Translations
  const t = useTranslations("FantasyNameGenerator")  
...
Alligator mississippiensis
Well i think i'm misunderstanding something! I kind of get it to work, but i got two remaining problems :
- not prefixed links doesn't lead to a 404. It just displays a default page
- when using <Link>, the prefix is not automatically set, so i must be doing something wrong !

Why is your layout a client component?

Well i might be doing it wrong here and maybe this is source problem : my layout contains the security part as i need the user to be fully connected on the whole app, from the root. So it the user is not connected when hitting / or /[locale] or any other route, he is redirected to the login component. And to do this i needed to use useState to manage the user token! I don't know if i messed up on this
I didn't get it that next-intl included a wrapper for <Link>