Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: v9 components are forbidden in the RSC within SSR setup( next - appdir) #32832

Open
2 tasks done
zailic opened this issue Sep 13, 2024 · 4 comments
Open
2 tasks done

[Bug]: v9 components are forbidden in the RSC within SSR setup( next - appdir) #32832

zailic opened this issue Sep 13, 2024 · 4 comments
Labels
Area: SSR Server-side rendering Fluent UI react-components (v9) Needs: Attention

Comments

@zailic
Copy link

zailic commented Sep 13, 2024 •
edited
Loading

Library

React Components / v9 (@fluentui/react-components)

System Info

OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (4) x64 AMD EPYC
Memory: 3.43 GB / 8.01 GB
Container: Yes
Shell: Unknown

Are you reporting an Accessibility issue?

None

Reproduction

CodeSandbox Sample

Bug Description

Actual Behavior

I'm pretty sure the SSR setup recipe from fluentuiv9 docs it worked at some point, but it seems this is no longer valid: When I'm trying to run it, the next server reports an error like the screenshot above:
Screenshot 2024-09-13 222958
Of course if I'm adding the 'use client' directive the error will go away, but this will transform a server component into a client component and this is not what I want.

Expected Behavior

V9 components should be allowed into RSC, as you mentioned on the docs:
Screenshot 2024-09-13 225327

Logs

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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394'
}
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "1650754739"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "1650754739"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
digest: "1104297394"
 ⨯ 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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394',
  page: '/'
}
 ○ Compiling /_error ...
 ✓ Compiled /_error in 41.5s (6495 modules)
 GET / 500 in 83966ms
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2744214429"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2744214429"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
digest: "1104297394"
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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394'
}
 ⨯ 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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394',
  page: '/'
}
 GET / 500 in 193ms
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2744214429"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "2744214429"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
digest: "1104297394"
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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394'
}
 ⨯ 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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394',
  page: '/'
}
 GET / 500 in 81ms
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "1650754739"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "1650754739"
 ⨯ 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 __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
digest: "1104297394"
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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394'
}
 ⨯ 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/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js:18:73)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/RendererContext.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:170:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js:7:81)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/makeStyles.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:270:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js:23:76)
    at (rsc)/./node_modules/.pnpm/@griffel+react@1.5.25_react@18.3.1/node_modules/@griffel/react/index.esm.js (/project/sandbox/.next/server/vendor-chunks/@griffel+react@1.5.25_react@18.3.1.js:230:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3080:16)
    at (rsc)/./node_modules/.pnpm/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy/node_modules/@fluentui/react-components/lib-commonjs/index.js (/project/sandbox/.next/server/vendor-chunks/@fluentui+react-components@9.54.15_@types+react-dom@18.3.0_@types+react@18.3.5_react-dom@18.3_jgwnwapdklhjslg6kgd3ybekpy.js:30:1)
    at __webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.tsx:9:84)
    at (rsc)/./app/page.tsx (/project/sandbox/.next/server/app/page.js:162:1)
    at Function.__webpack_require__ (/project/sandbox/.next/server/webpack-runtime.js:33:42)
    at async e7 (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396658)
    at async tS (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400214)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400775)
    at async tw (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400906)
    at async tO (/project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2320)
    at async /project/sandbox/node_modules/.pnpm/next@14.2.11_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2989 {
  digest: '1104297394',
  page: '/'
}

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@mainframev
Copy link
Contributor

mainframev commented Sep 16, 2024 •
edited
Loading

@zailic hi 👋🏻

Try to add transpilePackages: ["@fluentui/react-components"] as it mentioned here

@zailic
Copy link
Author

zailic commented Sep 16, 2024

hi @mainframev, yeesss it worked, thanks! I really appreciate your quick feedback on this. I guess this issue it could be closed...but (for a frictionless developer experience) I wonder if it wouldn't be better to keep this issue open until the documentation is updated as well?

@mainframev mainframev added the Area: SSR Server-side rendering label Sep 16, 2024
@mainframev
Copy link
Contributor

mainframev commented Sep 16, 2024 •
edited
Loading

@sopranopillow 👋🏻 , can you confirm that suggested approach is ok?

I see that #30766 is still opened and with transpilePackages it works even without the plugin, so not sure if it's correct.
I can close this issue as duplicate of the mentioned above.

@zailic
Copy link
Author

zailic commented Sep 16, 2024

@mainframev, actually the issue is still present if i'm going further and trying to use styles. I've updated the reproduction sample. Could you please take a look?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area: SSR Server-side rendering Fluent UI react-components (v9) Needs: Attention
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zailic @mainframev