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:

  1. Initially, WebStorm failed to show prop suggestions from TreeProps
  2. The editor only displayed the directly defined className prop

Discovery:

  1. After manually installing rc-tree (npm install rc-tree), WebStorm correctly displayed all prop suggestions
  2. Prior to installation, my project indirectly depended on rc-tree through antd (visible in package-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: ????

0

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 in node_modules, select Mark Directory As > Not Excluded, and then reopen the project.

1

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 

0
Unfortunately, it’s not quite clear what the problem is. Can you please translate the message to English? Do you have it shown for your project package.json, or for some package.json files from node_modules?
0

Elena Pogorelova 

Apologies, the content is now in English.

0

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?

0

I forgot to mention that this project has two workspaces, and its directory structure is as follows:

Root
--packages
----workspace1
------package.json
----workspace2
------package.json
--project.json

0

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?

0

请先登录再写评论。