React Tree Component (Legacy)

Common errors

• Module not found: Error: Can't resolve 'rc-tree'

  cause 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`).
  fix Verify `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

  cause 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.
  fix Ensure 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.

  cause The essential CSS stylesheet for `rc-tree` has not been imported into the application.
  fix Add `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.

Warnings

• breaking The `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.
  Fix: Migrate 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`.
• gotcha The `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.
  Fix: Ensure 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.
• deprecated Using `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.
  Fix: Consider 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.

Install

• npm install rc-tree npm
• yarn add rc-tree yarn
• pnpm add rc-tree pnpm

Imports

• Tree
  wrong:

  import { Tree } from 'rc-tree';
  const Tree = require('rc-tree').default;

  correct:

  import Tree from 'rc-tree';

  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
  wrong:

  import { TreeProps } from 'rc-tree';

  correct:

  import type { TreeProps } from 'rc-tree';

  For TypeScript users, import types using `import type` to avoid bundling issues and ensure type-only imports.

Quickstart

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;