[Bug]: Menu not appearing when MenuButton is clicked

[fardiansyah1808]

Library

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

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12450HX
    Memory: 3.13 GB / 11.71 GB
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

None

Reproduction

https://m9nzgn-3000.csb.app/dashboard

Bug Description

I am experiencing an issue where the menu does not appear when the MenuButton is clicked. The aria-expanded attribute changes to true, indicating that the menu should be open, but the menu itself is not visible.

##Steps to Reproduce:

1. Create a new React component.
2. Import the necessary components from @fluentui/react-components.
3. Implement the menu as shown in the code snippet below.
4. Click the MenuButton.

"use client";

import * as React from "react";
import {
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  MenuPopover,
  MenuTrigger,
  makeStyles,
} from "@fluentui/react-components";

export default function Page() {
  return (
    <Menu>
      <MenuTrigger>
        <MenuButton>Example</MenuButton>
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <MenuItem>
            <p>Item a</p>
          </MenuItem>
          <MenuItem>
            <p>Item b</p>
          </MenuItem>
        </MenuList>
      </MenuPopover>
    </Menu>
  );
}

##Expected Behavior:
The menu should appear when the MenuButton is clicked.

##Actual Behavior:
The aria-expanded attribute changes to true, but the menu does not appear.

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.

[ZakariaWijaya]

I am a colleague of Fardiansyah, this is the package.json

{
  "name": "fluent-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fluentui/react-button": "^9.3.83",
    "@fluentui/react-components": "^9.54.0",
    "@fluentui/react-icons": "^2.0.242",
    "@fluentui/react-nav-preview": "^0.3.0",
    "@hookform/resolvers": "^3.6.0",
    "autoprefixer": "^10.4.19",
    "classnames": "^2.5.1",
    "next": "14.2.3",
    "next-auth": "^4.24.7",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.5",
    "react-perfect-scrollbar": "^1.5.8",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "^5"
  }
}

the package.json

[ZakariaWijaya]

case done, adding reactStrictMode: false in next.config.mjs

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

export default nextConfig;

[miroslavstastny]

Duplicate of #31429