search

amannn / next-intl

🌐 Internationalization (i18n) for Next.js
https://next-intl-docs.vercel.app
MIT License
2.31k stars 210 forks source link

Error: No intl context found. Have you configured the provider? - next v13 #155

Closed sawa-ko closed 1 year ago

sawa-ko commented 1 year ago

Description

You get an error when using the hook useTranslations inside a client component that is inside a server component.

Error: No intl context found. Have you configured the provider?
    at useIntlContext (webpack-internal:///(sc_client)/./node_modules/.pnpm/use-intl@2.11.0-alpha.2_react@18.2.0/node_modules/use-intl/dist/use-intl.cjs.development.js:735:11)
    at useTranslations (webpack-internal:///(sc_client)/./node_modules/.pnpm/use-intl@2.11.0-alpha.2_react@18.2.0/node_modules/use-intl/dist/use-intl.cjs.development.js:788:17)
    at ReviewCard (webpack-internal:///(sc_client)/./components/home/Reviews.tsx:210:73)
    at renderWithHooks (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7756:16)
    at renderIndeterminateComponent (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7830:15)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8065:7)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderHostElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7740:3)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8071:5)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderChildrenArray (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8340:7)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8269:7)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8091:9)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderIndeterminateComponent (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7884:7)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8065:7)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderForwardRef (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7968:5)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8131:11)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderForwardRef (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7968:5)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8131:11)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderHostElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7740:3)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8071:5)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderChildrenArray (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8340:7)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8269:7)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderHostElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:7740:3)
    at renderElement (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8071:5)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)
    at renderNode (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8388:12)
    at renderChildrenArray (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8340:7)
    at renderNodeDestructiveImpl (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8269:7)
    at renderNodeDestructive (C:\Users\inmor\Documents\Proyectos\Naeko\dashboard\node_modules\.pnpm\next@13.0.8-canary.0_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\react-dom\cjs\react-dom-server.browser.development.js:8204:14)

Reproduction

Steps to reproduce:

  1. Create a app nextjs project
  2. Create a server component
  3. Create a client component and put inside server component
  4. See error
// client.ts
"use client";

import { useTranslations } from 'next-intl';

export default function Component() {
  const t = useTranslations();
  return <h1>{t('test')}</h1>
}

// server.ts
import Client from './client';

export default function Component() {
  return <Client />
}

Expected behaviour

No error about not being able to obtain the context. This happens only when using the components in this way.

amannn commented 1 year ago

Hey, as the error message states, you're liking missing the provider on the client side—please see https://next-intl-docs.vercel.app/docs/next-13. Also, please follow the issue template in the future and provide a CodeSandbox if you're seeing a bug. If you still see the error and have a reproduction, please open a new issue. Thanks!

sawa-ko commented 1 year ago

@amannn So, do I need to put the client provider in each component with "use client"?

amannn commented 1 year ago

It depends. If you don't mind to pass all messages to the client, you can set up the provider at a central place and provide all messages: https://next-intl-docs.vercel.app/docs/next-13/client-components

sawa-ko commented 1 year ago

I'm sorry, I didn't understand, in the link you send me it says I have to use the client provider, which is the same thing I said in my question, so you mean what I said I have to do?

amannn commented 1 year ago

Ultimately you have to use NextIntlClientProvider, either once globally, or individually for selected components.