PrimeReact components not showing in import suggestions

[bn-piar]

Describe the bug

In VSCode primereact components are not in the list of available imports

Reproducer

https://codesandbox.io/s/interesting-christian-t61g1y?file=/src/index.js

PrimeReact version

9.2.3

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

chrome

Steps to reproduce the behavior

1. bootstrap a project (cra, nextjs, redwoodjs)
2. install primereact dependencies
3. in a component add a primereact component

<Button />

4. call actions menu (ctrl+space or ctrl+.)
5. find there no Button import suggestion

Expected behavior

primereact components appear in suggestions

[melloware]

I get this issue too in VSCode once in a while. Sometimes its working other times it is not and I have not quite figured out why?

[mertsincan]

I think it has to do with the IDE's compiler. Sometimes it can't find PrimeReact or any library even though it is installed. Test;

https://user-images.githubusercontent.com/11868120/233268633-c255569b-4875-402a-afe7-1d7b48308552.mov

[bnn1]

@mertsincan hey. I'm having the same issue. No other library have their imports missing from import suggestion list. It only occurs with primereact components =( It's not dependent on the IDE. The same behavior repeats in Codesandbox, VSCode and Code-OSS. What you show in your "test" video is not import suggestions but component props. Delete Button import and try again

[melloware]

Agreed @mertsincan its on the initial Typing of <Button> it does not suggest the PrimeReact import.

[bn-piar]

I found this fixes import suggestions: Add index.ts file to the root primereact folder, export * from all components

// primereact/index.ts
export * from './button'
// ... rest exports

[melloware]

@bn-piar I had this in 8.6.0 see: https://github.com/primefaces/primereact/issues/3288

But it was reverted in 8.7.1 because it was causing too many issues with people not understanding the difference in importing with Tree Shaking: https://github.com/primefaces/primereact/issues/3513

[bnn1]

lack of auto import is a significant drawback because it forces me to manually import components, which can be time-consuming.

[melloware]

Totally agree I am just saying the global index.d.ts was removed because right now each component is individual for tree shaking purposes so the final bundle of JS only includes the actual components you use. I would love to solve this so a global index.d.ts can also be provided but doesn't cause issues.

[melloware]

@bn-piar do you want to submit a PR to review?

[bnn1]

I believe only major changes would fix the issue. Like rewriting the whole library in typescript. Or separating modules that require 3rd party packages from the core package. Or both.

[kl-nevermore]

@bnn1 I created a simple VS Code extension for code suggestions and quick fixes. can be used as a temporary solution https://marketplace.visualstudio.com/items?itemName=kl-nevermore.primereact-import-helper

[melloware]

@kl-nevermore this is nice how are you auto-generating this plugin? Is your project on GitHub?

[bnn1]

It works for me without extension

[melloware]

@bnn1 i thought you reported above it was not working for you?

[bnn1]

@melloware it is working now

[N1rm4l]

@bnn1 did you do anything to make it work? I'm facing the same issue.

[bnn1]

@melloware @N1rm4l I've tested it a few months back, it was working. Just tested it again and it's not working anymore ¯\(ツ)/¯

also, this problem doesn't exist in Webstorm (autoimports are working in webstorm)

[kl-nevermore]

I created a simple VS Code extension for code suggestions and quick fixes. can be used as a temporary solution https://marketplace.visualstudio.com/items?itemName=kl-nevermore.primereact-import-helper

I released 0.1.0 a few days ago to fix known bugs can try it