[Bug]: @carbon/react/icons module does not provide IDE import auto-complete

[jharvey10]

Package

@carbon/react

Browser

No response

Package version

1.1.0

React version

not specific to a version of react

Description

When importing icons via the @carbon/react/icons re-export, no auto-completions are provided in VS Code:

versus @carbon/icons-react which looks like:

It doesn't look like the IDE auto-completion is smart enough to follow the combination of Object.keys and Object.defineProperty to provide the exhaustive list of icons that are available at runtime/build time.

Though I'm not sure exactly how to accomplish it, it seems like a more direct re-export of the icons from the required module would be what is needed to get past this.

There's also an info message that pops up in vscode for this import which is not present on the icons-react version:

versus icons-react which has a full-blown d.ts file to which it links that provides type info:

CodeSandbox example

n/a

Steps to reproduce

1. Install @carbon/react into a React project
2. Open a component file in an IDE like VS Code
3. Attempt to import an icon from @carbon/react/icons
4. Observe that the auto-complete list does not show any of the available icons

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[joshblack]

@jdharvey-ibm trying a quick change over in: https://github.com/carbon-design-system/carbon/pull/11318 that matches what other icon libraries with sub-folder imports do just in case it's a quickfix.

Otherwise, we may need to just generate types for this folder to help out since what VSCode is doing is downloading the types from @types/carbon__icons-react from DT

[jharvey10]

@joshblack sweet! What can I do to help out with testing?

[joshblack]

@jdharvey-ibm something that would help out a ton when it's merged in would be to:

• Pull down latest updates from main
• Run a build (can use yarn lerna run build --scope='@carbon/icons-react' --include-dependencies to target just the icons package)
• Link the package with npm link to connect it to your project
• See if autocomplete works as expected or if it's still messed up

[joshblack]

@jdharvey-ibm if you have a sec to test out latest, let me know! Should be available now

[jharvey10]

Testing it now!

[jharvey10]

If I explicitly reference the index.esm file, I get autocomplete:

But if I reference @carbon/react/icons, I don't get the auto-complete anymore:

If I switch the package.json file in @carbon/react/icons to have "main": "index.esm.js", the autocomplete works, but with it set to index.js, it doesn't look like the auto-complete is smart enough to know that it should look at module instead of main and just always looks at main.

[joshblack]

@jdharvey-ibm thanks for trying it out! Super interesting 🤔

I assume you don't run into problems with packages like react-icons with its subpaths, correct?

[joshblack]

I wonder if we should try having the default index.js file and then only set module in package.json similar to what they do 🤔

[jharvey10]

When trying the example from their docs, I do indeed get autocomplete, but it looks like they're repo must be broken down into some different folders:

Interestingly, I just realized that if I switch to using @carbon/react/icons/es as my import, that does work as far as autocomplete goes:

[joshblack]

Looks like in the latest update this is still an issue 😞 it seems unable to resolve any kind of type file for that entrypoint.

Similarly, it seems like the default types for the package are incorrect on DefinitelyTyped which is causing some of the oddity for imports.

It seems like our only way to address this is to offer an index.d.ts file that either directly exports the types or explicitly re-exports from the @carbon/icons-react (which also needs to be updated)

[TannerS]

Any update?

[joshblack]

Hey @TannerS! 👋 It seems like the big thing for incorrect imports is that there is a local cache of packages which are probably being pulled from for completion.

In the case of @jdharvey-ibm above, it seemed like a local cache was being used:

Deleting that cache entry seemed to fix the issue of "invalid imports" but I would love to hear from you if this helps in the IntelliJ use-case 👀

[TannerS]

How do I check? Is this released ?

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Josh Black @.> Sent: Thursday, June 16, 2022 4:18:30 PM To: carbon-design-system/carbon @.> Cc: Tanner Summers @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: @carbon/react/icons module does not provide IDE import auto-complete (Issue #11317)

Hey @TannerShttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FTannerS&data=05%7C01%7C%7C9dbe9d238d71437bcde808da4fddc323%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910111128105664%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=yX0gGoYG6EliBnzx0BVDE0uzM%2Bqh8pFmI73O09qNEO4%3D&reserved=0! 👋 It seems like the big thing for incorrect imports is that there is a local cache of packages which are probably being pulled from for completion.

In the case of @jdharvey-ibmhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjdharvey-ibm&data=05%7C01%7C%7C9dbe9d238d71437bcde808da4fddc323%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910111128105664%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=DQPw02bgZ%2F9uqrFQX1QZ3Nf2cPpbI%2FGje5%2Ftt0L2jmA%3D&reserved=0 above, it seemed like a local cache was being used: [Screen Shot 2022-06-16 at 4 08 52 PM]https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F3901764%2F174165664-7f39e0d0-3b71-42d1-8d22-25dc3cdbeb5d.png&data=05%7C01%7C%7C9dbe9d238d71437bcde808da4fddc323%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910111128105664%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=g%2FG%2BZQV%2B%2B%2FrKeWz54%2F8DmJYSnCPzI46sKFj1VO3FsIo%3D&reserved=0

Deleting that cache entry seemed to fix the issue of "invalid imports" but I would love to hear from you if this helps in the IntelliJ use-case 👀

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F11317%23issuecomment-1158138895&data=05%7C01%7C%7C9dbe9d238d71437bcde808da4fddc323%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910111128105664%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=E%2FQWWnW0vIOSIEgozfXg9wsAwI6ioF6akRnzd9cP9ak%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUD56T6NJM3T67NNKBALVPOK2NANCNFSM5UUOPNKA&data=05%7C01%7C%7C9dbe9d238d71437bcde808da4fddc323%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910111128105664%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=uGzfHcfFPZKH15VrjL5P0pGfbjLhFs5IBNGP%2FCkMfYg%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>

[joshblack]

@TannerS it should require no updates to the package itself, it seems like the behavior comes from the TypeScript cache versus the package

[TannerS]

Hmm so I clear....IDE cache?

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Josh Black @.> Sent: Thursday, June 16, 2022 4:24:06 PM To: carbon-design-system/carbon @.> Cc: Tanner Summers @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: @carbon/react/icons module does not provide IDE import auto-complete (Issue #11317)

@TannerShttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FTannerS&data=05%7C01%7C%7Cfb16862efb0e4b93b1bd08da4fde8bc6%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910114490178530%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Ghs5%2FeAtYCfHPu7rORHGW%2Fr6KH%2Bmy4F50kIZfnsuSuU%3D&reserved=0 it should require no updates to the package itself, it seems like the behavior comes from the TypeScript cache versus the package

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcarbon-design-system%2Fcarbon%2Fissues%2F11317%23issuecomment-1158142729&data=05%7C01%7C%7Cfb16862efb0e4b93b1bd08da4fde8bc6%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910114490178530%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=o3YFJjqYsDIpvIWuHV3YhR6VoEYKr9gWTLoGEvO8Crw%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACDUUD7JNC3FAPPLQCESZ6LVPOLPNANCNFSM5UUOPNKA&data=05%7C01%7C%7Cfb16862efb0e4b93b1bd08da4fde8bc6%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637910114490178530%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=LQ1bjSmV7YxXn3YQ3J1lIUL7JPBT1qqpFsybnatHgdo%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>

[jharvey10]

For me on Mac, when I stepped into the definitions file it was pulling from, it was in the node modules cache in my typescipt 4.7 directory (~/Library/Caches/typescript/4.7/node_modules/@types/carbon__icons-react). I'm guessing it's an IDE feature to attempt to download types for packages from the @types namespace in an effort to be helpful. I'm not aware of a way to turn that off for VS Code (or other editors)

As a stopgap, what I might do is pull down the type definitions from over in #11533 into a local folder in my repo and include a typeRoots property in our tsconfig file to search there first.

This is definitely being actively worked on though! @joshblack and I have had some discussions about it.

@joshblack Is this enough of an issue to where we should look into deleting the definitions from DefinitelyTyped?

[joshblack]

@jdharvey-ibm good question, I think most downloads are still coming from pre-v11 and so would be helpful for teams wanting to use TS + pre-v11 icons. TypeScript support is definitely one of the biggest blocker for folks moving to v11, though, so I feel kind of stuck with what to do.

Do we know if there is a way for the types on DefinitelyTyped to only correspond to pre-v11 versions?

[metonym]

@types/carbon__icons-react has been updated to v11.5.0.

You should now see the correct types for v11 icons.

[jharvey10]

Confirmed that when I import via @carbon/react/icons/index.esm, I get the right set of imports available, which is awesome.

The main thing still outstanding for this issue is that I don't get the auto-complete from the standard @carbon/react/icons import; I have to use the more-specific index.esm one. Not a huge deal, but wanted to note it.

[metonym]

I don't get the auto-complete from the standard @carbon/react/icons import

Is that something that #11533 would solve?

Ideally, types/JSDocs would be shipped with @carbon/icons-react (see comments) so that @types/carbon__icons-react could be removed altogether.

Because even as I type this comment, @types/carbon__icons-react is already one minor version behind @carbon/icons-react, which is now v11.6.0.

[jharvey10]

@metonym unfortunately for my use case I don't believe that would help. The issue I have when working with the icons through the @carbon/react export is that the index.js file at @carbon/react/icons/index.js does not appear to be defined in a way in which VS Code can compute the available imports for the icons package. Something about the cjs syntax in it and the use of defineProperty isn't properly recognized. index.esm.js works fine though since the only contents of that file are export * from '@carbon/icons-react';

[metonym]

@jdharvey-ibm Follow-up thought: why not import icons from @carbon/icons-react directly since it's a direct dependency of @carbon/react?

[jharvey10]

@metonym that's definitely doable! As a general strategy though, we want the @carbon/react package to be a one-stop shop for everything you need to develop with React + Carbon. As a workaround, that and using the es import will both do the trick; it's just not the intended behavior.