Component properties auto-complete fails for react project in IntelliJ Idea Ultimate. Follow

Hi Rohit - can you share a demo project where this can be reproduced?

Arina Efremova As I can't upload zip file here but it is easy to reproduce. 

1. Create a fresh project using create-react-app or IntelliJ.
2. Add "react-select": "^4.3.1" dependency in package.json file.
3. import import AsyncSelect from 'react-select/async'; in App.js.
4. Use the AsyncSelect component inside the return of function and you'll see that there is no suggestions for properties of AsyncSelect component in IntelliJ.

Installing react-select typings (using npm install @types/react-select, or via the intention available on Alt+Enter - see https://www.jetbrains.com/help/idea/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files) should help:

This is exactly what VSCode does behind the scene to enhance the completion

Elena Pogorelova Thanks for answering. I tried and yes it is working. Now I want to know is there any settings that will auto download of @types for all libraries in package.json automatically so that I need not to do it manually every time just like VS Code?

Actually this feature is there, but it's enabled by a subset of known widely used libraries only: if a package is specified in the package.json dependencies list AND listed in typescript.external.type.definitions.packages. key in Registry (Help > Find Action..., enter registry... to locate it), then the typings are downloaded automatically in background

Elena Pogorelova Ok, but it defeats the purpose, every time I add new library, I had to add in that registry. Is there any value that can be set to that registry so that it enables to download any library from package.json and need not to explicitly mention anywhere.

No, there are no such settings

Hi, I am experiencing the same issue. I am creating a component library, and IntelliJ does not show autocomplete or recommendations for React if the consumer is not using Typescript.

Just to clarify, does the consumer project need to be using Typescript and have a tsconfig file, for what Elena Pogorelova have suggested to work (conf TS libraries)?

If so, then is sadly a great limitation, as VSCode works out of the box for consumers that do not use Typescript.

No, the library doesn't necessary have to include Typescript declaration files, but using them makes the completion much better. VSCode doesn't work for most of pure JS libraries as well, but it downloads the .d.ts files (if any) for a library silently in background. In WebStorm, you have to do this explicitly per instructions in https://www.jetbrains.com/help/idea/configuring-javascript-libraries.html#ws_js_configuring_libraries_ts_definition_files_download_procedure

Elena Pogorelova thanks for your quick answer.

We are building our own library, therefore there is no place online where JetBrains or VSCode can download .d.ts files, currently. I assume then, VSCode is picking up the information from our library .d.ts in node_modules. This is unfortunately not working fully in IntelliJ with consumers using Typescript, and not at all in projects without Typescript. 

IntellyJ, consumer with Typescript:

IntellyJ, consumer without Typescript:

VSCode, same consumer without Typescript::

I am aware both are different IDEs and the implementation on how to parse .d.ts might differ. Also that the issue may lay in our .d.ts files implementation, but I am a bit confused on why it works in VSCode if that is the case.

As your library includes d.ts, there is no need to download them separately.

VSCode is using the compiler service to resolve properties even when working with JSX, it's results are often more accurate than the results of static code analysis WebStorm uses when working with React. If you have a sample project you can share that reproduces the issue, it would be helpful