carbon: [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

Install @carbon/react into a React project
Open a component file in an IDE like VS Code
Attempt to import an icon from @carbon/react/icons
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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 23 (20 by maintainers)

Most upvoted comments

@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 on Aug 5, 2022

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.

jdharvey-ibm on Aug 5, 2022

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

You should now see the correct types for v11 icons.

metonym on Aug 5, 2022