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

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

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[jdharvey-ibm]

@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';

[jdharvey-ibm]

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.