Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Menu
✓ import Menu from 'rc-menu';
✗ const Menu = require('rc-menu');
This is the default export for the main Menu component. For CommonJS, named exports like `SubMenu` or `MenuItem` are typically accessed as properties of the default export (e.g., `Menu.SubMenu`).
SubMenu
✓ import { SubMenu } from 'rc-menu';
✗ import SubMenu from 'rc-menu/lib/SubMenu';
SubMenu is a named export. Direct imports from deeply nested paths like `rc-menu/lib/SubMenu` are generally discouraged and can break with bundler optimizations or future refactors.
MenuItem
✓ import { MenuItem } from 'rc-menu';
✗ import { Item } from 'rc-menu';
MenuItem is a named export. While the internal API might refer to `Item`, the public facing export for menu items is `MenuItem`.
This example demonstrates a basic `rc-menu` setup with a root menu, a submenu, and individual menu items, including a disabled item, rendered into a DOM element. It also includes the necessary CSS import for basic functionality.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Menu, { SubMenu, MenuItem } from 'rc-menu';
import 'rc-menu/assets/index.css'; // Don't forget to import basic styles if needed
const App = () => (
<div>
<h2>Basic rc-menu Example</h2>
<Menu style={{ width: 200, border: '1px solid #ddd' }}>
<MenuItem key="1">Option 1</MenuItem>
<SubMenu key="sub1" title="Submenu">
<MenuItem key="2-1">Sub-option 2-1</MenuItem>
<MenuItem key="2-2">Sub-option 2-2</MenuItem>
</SubMenu>
<MenuItem key="3" disabled>Disabled Option 3</MenuItem>
</Menu>
</div>
);
const container = document.getElementById('root');
if (container) {
const root = ReactDOM.createRoot(container);
root.render(<App />);
} else {
console.error("Root element not found. Please ensure a div with id 'root' exists in your HTML.");
}
Debug
Known issues
breakingThe `rc-menu` package has been renamed and its active development has moved to `@rc-component/menu`. While `rc-menu` (v9.16.1) is still available, it is effectively deprecated and will not receive new features or significant updates.fixMigrate your project to use `@rc-component/menu` by updating your `package.json` and import statements. The API surface is largely compatible, but minor adjustments may be needed. Refer to the `@rc-component/menu` documentation for the latest usage.
affects: >=9.0.0
gotcha`rc-menu` is a low-level, unstyled component. It provides functionality but no default visual styling. Without importing a CSS file or applying custom styles, the menu will appear as raw HTML elements.fixImport `rc-menu/assets/index.css` for basic functionality styling, or provide your own custom CSS/LESS/Sass styles to match your application's design system.
affects: >=1.0.0
gotchaIncorrect React peer dependency versions can lead to runtime errors or unexpected behavior. `rc-menu` requires specific React versions.fixEnsure your project's `react` and `react-dom` versions meet the peer dependency requirements (`>=16.9.0` for `rc-menu@9.16.1`). Upgrade React if necessary.
affects: <9.0.0
gotchaWhen migrating from `rc-menu` to `@rc-component/menu`, internal dependencies like `rc-overflow` have also been renamed to `@rc-component/overflow`. Direct imports or assumptions about these sub-packages might break.fixEnsure all `rc-*` dependencies are updated to their `@rc-component/*` counterparts if you're using them directly. It's best practice to only import from the main `@rc-component/menu` package unless absolutely necessary.
affects: >=1.0.0 (for @rc-component/menu)
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'SubMenu')
Attempting to access named exports like `SubMenu` or `MenuItem` as properties of a CommonJS `require` call without proper interop handling.
fixIf using CommonJS, explicitly destructure the exports or access them as properties of the default export, e.g., `const { SubMenu, MenuItem } = require('rc-menu');` or `const Menu = require('rc-menu'); const SubMenu = Menu.SubMenu;`. Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This error often indicates a mismatch in React versions or multiple instances of React being loaded, common in complex monorepos or when peer dependencies are not correctly resolved.
fixCheck your `node_modules` for duplicate React installations. Ensure that `react` and `react-dom` peer dependencies are correctly installed and that only one version of React is bundled. Use `npm ls react` or `yarn why react` to diagnose.
Module not found: Error: Can't resolve 'rc-menu/assets/index.css'
The main stylesheet for `rc-menu` is not found, typically because it wasn't explicitly imported or your build system isn't configured to handle CSS imports.
fixAdd `import 'rc-menu/assets/index.css';` to your entry point or main component. Ensure your bundler (e.g., Webpack, Vite) has appropriate loaders (like `css-loader` and `style-loader`) configured to process CSS files.
Audit
Dependencies
reactrequiredPeer dependency for rendering React components.
react-domrequiredPeer dependency for rendering React components to the DOM.
@rc-component/motionrequiredUsed for animation effects when submenus open or close.
@rc-component/overflowrequiredManages overflow behavior within the menu. Note: This dependency migrated from 'rc-overflow' in the newer `@rc-component/menu` package.
@rc-component/triggerrequiredHandles advanced triggering mechanisms for dropdowns and submenus.
@rc-component/utilrequiredCollection of utility functions used across rc-components.
clsxrequiredUtility for conditionally joining classNames together.