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.
Cascader
✓ import Cascader from 'rc-cascader';
✗ const Cascader = require('rc-cascader');
While CommonJS `require` works, modern React projects typically use ES module `import` syntax.
CascaderProps
✓ import type { CascaderProps } from 'rc-cascader';
Import types separately for better type-checking and bundle size optimization in TypeScript projects.
Cascader
✓ import Cascader from 'rc-cascader';
✗ import Cascader from '@rc-component/cascader';
Ensure you are importing from the correct package name. `rc-cascader` is the older, deprecated name; `@rc-component/cascader` is its active successor.
This example demonstrates how to render a basic Cascader component with static hierarchical options, using an input field as the trigger. It requires a root HTML element with `id="root"`.
import React from 'react';
import ReactDOM from 'react-dom';
import Cascader from 'rc-cascader';
const options = [{
'label': '福建',
'value': 'fj',
'children': [{
'label': '福州',
'value': 'fuzhou',
'children': [{
'label': '马尾',
'value': 'mawei',
}],
}, {
'label': '泉州',
'value': 'quanzhou',
}],
}, {
'label': '浙江',
'value': 'zj',
'children': [{
'label': '杭州',
'value': 'hangzhou',
'children': [{
'label': '余杭',
'value': 'yuhang',
}],
}],
}, {
'label': '北京',
'value': 'bj',
'children': [{
'label': '朝阳区',
'value': 'chaoyang',
}, {
'label': '海淀区',
'value': 'haidian',
}],
}];
const App = () => (
<div style={{ padding: 20 }}>
<h2>Cascader Example</h2>
<Cascader options={options} placeholder="Please select">
<input style={{ width: 200, padding: 8, borderRadius: 4, border: '1px solid #ccc' }} readOnly value="Select region" />
</Cascader>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
Debug
Known issues
breakingThe `rc-cascader` package has been superseded and effectively renamed to `@rc-component/cascader`. All active development, bug fixes, and new features are now exclusively released under the `@rc-component/cascader` package (starting with its v1.8.0 release).fixFor new projects or to receive updates, uninstall `rc-cascader` and install `@rc-component/cascader`. Update all import paths from 'rc-cascader' to '@rc-component/cascader'.
affects: All versions of `rc-cascader` (>=3.0.0)
gotchaThe `rc-cascader` component provides unstyled logic. If you are expecting a fully styled component, you will need to apply your own CSS or integrate it within a design system like Ant Design which provides its own styling for this component.fixBe prepared to write custom CSS or use a UI library that wraps `rc-cascader` with predefined styles. Refer to the official examples for styling integration patterns.
affects: All versions
gotchaThe `Cascader` component in its raw form requires a child element to act as its trigger. If no child is provided, the component might not render correctly or be interactable.fixAlways provide a clickable child element (e.g., `<input>`, `<span>`, `<button>`) to act as the trigger for opening the cascader dropdown.
affects: All versions
Errors
Common errors & fixes
Module not found: Can't resolve 'rc-cascader' in '...'
The package `rc-cascader` is not installed, or you are attempting to import it while `rc-cascader` has been uninstalled in favor of `@rc-component/cascader`.
fixEnsure `rc-cascader` is listed in your `package.json` and installed (`npm install rc-cascader`). If migrating, update imports to `import Cascader from '@rc-component/cascader';` after installing the new package.
TypeError: Cannot read properties of undefined (reading 'render')
This error often occurs in modern React setups when `React.render` is called directly. `React.render` has been deprecated since React 18, which uses `ReactDOM.createRoot().render()`.
fixFor React 18+, use `import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);`. For older React versions, ensure you have `import ReactDOM from 'react-dom';` and call `ReactDOM.render(<App />, document.getElementById('root'));`. Audit
Dependencies
reactrequiredPeer dependency required for rendering React components.
react-domrequiredPeer dependency required for rendering React components to the DOM.