Missing Prop Type Suggestions for React Component Extending Third-Party Library Types
I defined a React component with the following implementation:
import { FC } from "react";
import type { BasicDataNode, TreeProps } from 'rc-tree';
import type { DataNode } from 'rc-tree/lib/interface';
export interface TestTreeProps<T extends BasicDataNode = DataNode>
extends Omit<TreeProps<T>, 'showLine'> {
className?: string;
}
export const TestTree: FC<TestTreeProps> = (props) => {
return <div>TestTree</div>;
}
The component extends TreeProps
from the rc-tree
library, whose interface is defined as:
export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
prefixCls: string;
className?: string;
style?: React.CSSProperties;
focusable?: boolean;
// ... other props
}
Expected Behavior:
When using the TestTree
component, I should see IntelliSense suggestions for all inherited props (focusable
, prefixCls
, etc.) from TreeProps
.
Observed Behavior:
- Initially, WebStorm failed to show prop suggestions from
TreeProps
- The editor only displayed the directly defined
className
prop
Discovery:
- After manually installing
rc-tree
(npm install rc-tree
), WebStorm correctly displayed all prop suggestions - Prior to installation, my project indirectly depended on
rc-tree
throughantd
(visible inpackage-lock.json
)
Q: Why was I able to use rc-tree
types without explicitly declaring it as a dependency?
A: This worked because antd
includes rc-tree
as a transitive dependency
Q: Is there a way to get proper type hints without manually adding rc-tree
?
A: ????
请先登录再写评论。
The indirect dependencies (those that are not included in the
"dependencies"
and"devDependencies"
sections of the package.json) are not indexed to enhance performance, which is why the modules listed there are not suggested in completion. If you are utilizing modules from the transitive dependencies in your code, you have the option to either add them to your package.json or manually unexclude them by marking the relevant folder as not excluded: right-click on the package folder innode_modules
, select Mark Directory As > Not Excluded, and then reopen the project.Thank you very much. Setting up node_module did work, but now there's another issue. It automatically checks the package.json file in my node_module and prompts me to install the corresponding dependencies. Is there any good solution to fix this?
Elena Pogorelova
Elena Pogorelova
Apologies, the content is now in English.
Thank you.
This shouldn't normally happen. What package manager do you use in your project? What do your settings in Settings | Languages & Frameworks | Node.js look like?
@Elena Pogorelova
I forgot to mention that this project has two workspaces, and its directory structure is as follows:
Could you share a project that reproduces the issue? If that's not possible, can you try creating a new minimal project that mimics your folder structure and setup (package.json files, etc.) (with dummy source files) to see if the issue can be reproduced in a simplified context?