[Bug]: Menu control not appearing in NextJS

[jkizziar]

Library

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

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 15.25 GB / 63.76 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

no

Reproduction

https://github.com/jkizziar/nextjs-fluentui-menu-issue

Bug Description

Actual Behavior

Menu context does not appear utilizing a base nextjs install with fluentui react components. Using following versions:
"@fluentui/react-components": "^9.52.0",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"

Expected Behavior

Expecting to see context menu. Tested same code using latest Vite and it is working.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

[layershifter]

Your example lacks proper setup (does not have needed providers), please check https://react.fluentui.dev/?path=/docs/concepts-developer-server-side-rendering-next-js-appdir-setup--page.

[jkizziar]

I took it too bare bones for reproduction - but I've added the SSR and RendererProvider and now have it matching essentially verbatim to the example and setup reference and still do not get the context to show. Updated github repo.

[jkizziar]

I was able to get around the issue by setting reactStrictMode fo false in the next.config.mjs file:

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, }; export default nextConfig;

Without this both the menu context and drawers set to overlay will not appear.

[layershifter]

@jkizziar thanks, I was able to repro it.

Next uses React 18.3.0-canary-14898b6a9-20240318 which seems to contain changes from React 19 beta related to effects.

18.3

https://stackblitz.com/edit/vitejs-vite-2qfxth

useMemo
render {i: 1}
useMemo
render {i: 2}
useEffect
useEffect

18.3.0-canary-14898b6a9-20240318

https://stackblitz.com/edit/vitejs-vite-qnt1wx

useMemo
useMemo
render {i: 2}
render {i: 2}
useEffect
useEffect

---

I suggest to disable Strict Mode for mode, we will look for a proper fix. The problem occurs in Portal because of useDisposable() usage.

[tomivm]

Waiting for a better solution :)