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

[plibr]

I implement https://next-intl-docs.vercel.app/examples/minimal
as my project, but I encounter this error.

I got this error: Error: No intl context found. Have you configured the provider?

Where did I make mistake?

Error: No intl context found. Have you configured the provider?
    at useIntlContext (/home/juma/node/full/next/ny/node_modules/use-intl/dist/use-intl.cjs.development.js:249:11)
    at useTranslations (/home/juma/node/full/next/ny/node_modules/use-intl/dist/use-intl.cjs.development.js:499:17)
    at Index (webpack-internal:///./src/pages/index.tsx:17:73)
    at renderWithHooks (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at finishClassComponent (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3)
    at renderClassComponent (/home/juma/node/full/next/ny/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3)
wait  - compiling /_error (client and server)...``

My dependencies are: 
"dependencies": {
    "next": "12.2.3",
    "next-intl": "^2.7.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.0.6",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "typescript": "4.7.4"
  }

Where did I make mistake?

[amannn]

This error occurs because you're using next-intl APIs in a Client Component, but you haven't configured NextIntlClientProvider (see the docs for NextIntlClientProvider and the corresponding troubleshooting section).

To provide help for your specific situation I might need a reproduction using this template.

[plibr]

Hi! Thank you for answer! Here is my sandbox

Problem is in:
at Index (webpack-internal:///./pages/index.tsx:17:73)

[plibr]

dependencies versions are concerned

[amannn]

I'm getting a build error in your project because you're using TypeScript types in a JavaScript file. Also TypeScript dependencies are missing. These are general errors that are not related to this library.

Are you starting out with Next.js? I would advise you to refer closely to the Next.js docs when setting up a project and introduce changes step-by-step while resolving the errors you're seeing.

I'm unfortunately not able to provide assistance with issues that are not related to next-intl, I hope you understand.

[MiftahClassifieds]

Check if your throwing error component , is wraped with NextIntlClientProvider in RoutLayout

[lucasmolenaar]

For me the solution was to remove 'use client' at the top of the layout.tsx. I don't know why it was there in the first place, but removing it solved the error.