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.
Tree
✓ import Tree from 'rc-tree';
✗ import { Tree } from 'rc-tree';
const Tree = require('rc-tree').default;
The main Tree component is a default export. Ensure correct import syntax, especially in mixed CJS/ESM environments.
rc-tree/assets/index.css
✓ import 'rc-tree/assets/index.css';
Required to include the default styles for the Tree component. Styles are not automatically bundled.
TreeProps
✓ import type { TreeProps } from 'rc-tree';
✗ import { TreeProps } from 'rc-tree';
For TypeScript users, import types using `import type` to avoid bundling issues and ensure type-only imports.
This quickstart demonstrates a basic interactive tree component using `rc-tree` with checkable nodes, controlled expansion, checking, and selection states. It includes the necessary CSS import and a minimal `treeData` structure.
import React, { useState } => from 'react';
import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';
const treeData = [
{
key: '0-0',
title: 'Parent Node 1',
children: [
{ key: '0-0-0', title: 'Child Node 1-1' },
{ key: '0-0-1', title: 'Child Node 1-2' },
],
},
{
key: '0-1',
title: 'Parent Node 2',
children: [
{ key: '0-1-0', title: 'Child Node 2-1' },
{ key: '0-1-1', title: 'Child Node 2-2' },
],
},
];
const MyTreeComponent = () => {
const [expandedKeys, setExpandedKeys] = useState([]);
const [checkedKeys, setCheckedKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const onExpand = (keys) => {
console.log('onExpand', keys);
setExpandedKeys(keys);
};
const onCheck = (keys, info) => {
console.log('onCheck', keys, info);
setCheckedKeys(keys);
};
const onSelect = (keys, info) => {
console.log('onSelect', keys, info);
setSelectedKeys(keys);
};
return (
<div style={{ padding: '20px' }}>
<h2>Basic rc-tree Example</h2>
<Tree
checkable
defaultExpandAll
onExpand={onExpand}
expandedKeys={expandedKeys}
onCheck={onCheck}
checkedKeys={checkedKeys}
onSelect={onSelect}
selectedKeys={selectedKeys}
treeData={treeData}
/>
</div>
);
};
export default MyTreeComponent;
Debug
Known issues
breakingThe `rc-tree` package has been renamed to `@rc-component/tree`. All future development, bug fixes, and new features will occur under the new package name. `rc-tree` (npm) is no longer actively maintained.fixMigrate your project to use `@rc-component/tree`. Uninstall `rc-tree` and install `@rc-component/tree`. Update all import paths from `rc-tree` to `@rc-component/tree`.
affects: >=1.2.2 of @rc-component/tree (which replaced rc-tree)
gotchaThe `rc-tree` package relies on specific CSS for its styling. If the `rc-tree/assets/index.css` file is not imported, the component will render unstyled, appearing broken or misaligned.fixEnsure you have `import 'rc-tree/assets/index.css';` (or similar for your build tool) in your entry point or directly in the component where `rc-tree` is used.
affects: All versions of `rc-tree`
deprecatedUsing `rc-tree` in modern JavaScript projects, especially those strictly enforcing ESM, might lead to compatibility issues. `rc-tree` was developed in an era when CommonJS was prevalent, and its default export might require specific handling in ESM-only contexts.fixConsider migrating to `@rc-component/tree` which has better modern module support. If you must use `rc-tree`, ensure your build tools (Webpack, Rollup, Vite) are configured to correctly transpile CommonJS modules for browser consumption.
affects: All versions of `rc-tree` in ESM-first environments
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'rc-tree'
The package `rc-tree` is not installed, or the import path is incorrect, or the package was uninstalled after migrating to the new name (`@rc-component/tree`).
fixVerify `rc-tree` is listed in your `package.json` and installed. If you intended to use the newer version, install `@rc-component/tree` and update your imports accordingly.
TypeError: (0, _rc_tree.default) is not a function
This typically occurs when trying to `require` or `import` the `Tree` component incorrectly. `rc-tree` uses a default export for the main component, but sometimes transpilation or incorrect module resolution can lead to issues.
fixEnsure you are using `import Tree from 'rc-tree';` in ESM or `const Tree = require('rc-tree');` (or `const Tree = require('rc-tree').default;` if your bundler/loader requires it) in CJS. Tree component renders without any styling or with broken layout.
The essential CSS stylesheet for `rc-tree` has not been imported into the application.
fixAdd `import 'rc-tree/assets/index.css';` to your main application file or the component where `rc-tree` is used. Ensure your build system is configured to process CSS imports.
Audit
Dependencies
reactrequiredPeer dependency for React applications.
react-domrequiredPeer dependency for rendering React components to the DOM.