Use context provider from external dependency fails because missing "use client"

Question

Hi I want to use a AuthProvider provided by "react-oidc-context".
If I use it in my layout.tsx file, I get a error. So I created a wrapper which uses "use client":
src/config/auth-provider.tsx

"use client";

import { AuthProvider } from "react-oidc-context";
import { oidcConfig } from "./auth";

export default function AuthProviderWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return <AuthProvider {...oidcConfig}>{children}</AuthProvider>;
}

But even if I use the wrapper I got an error:

node_modules/react-oidc-context/dist/esm/react-oidc-context.js (3:18) @ React
 â¨¯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at eval (webpack-internal:///(rsc)/./node_modules/react-oidc-context/dist/esm/react-oidc-context.js:14:68)
    at (rsc)/./node_modules/react-oidc-context/dist/esm/react-oidc-context.js (/Users/titan/it-financeflow/ember/ember-web/.next/server/vendor-chunks/react-oidc-context.js:30:1)
   [...]
  type: 'TypeError',
  page: '/de'
}
null
 â¨¯ node_modules/react-oidc-context/dist/esm/react-oidc-context.js (3:18) @ React
 â¨¯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

Sun bear · Answer

Okay, I found the issue. It was caused by next-intl and my layout.tsx in the [locale] folder (https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-unstable_setrequestlocale-to-all-layouts-and-pages). Somehow this layout can not use the Wrapper Provider. After moving the AuthProviderWrapper to the layout.tsx in the app folder (root), it worked.

Use context provider from external dependency fails because missing "use client"

2 Replies