Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Issues with types for @carbon/react (ESM) #15420

Open
2 tasks done
nstuyvesant opened this issue Dec 18, 2023 · 6 comments
Open
2 tasks done

[Bug]: Issues with types for @carbon/react (ESM) #15420

nstuyvesant opened this issue Dec 18, 2023 · 6 comments

Comments

@nstuyvesant
Copy link
Contributor

Package

@carbon/react

Browser

Safari

Package version

1.46.0

React version

18.2.0

Description

The file @carbon/react/es/index.d.ts has a large number of exports that refer to files that DO NOT EXIST...

export * from './components/AccordionItem';
export * from './components/CheckboxGroup';
export * from './components/CodeSnippet';
export * from './components/ContainedList';
export * from './components/ContextMenu';
export * from './components/ErrorBoundary';
export * from './components/FilterableMultiSelect';
export * from './components/Menu';
export * from './components/ModalWrapper';
export * from './components/Pagination';
export * from './components/PaginationNav';
export * from './components/PasswordInput';
export * from './components/PrimaryButton';
export * from './components/ProgressIndicator';
export * from './components/SecondaryButton';
export * from './components/SkeletonIcon';
export * from './components/Switch';
export * from './components/TreeView';
export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput';
export { FluidTimePickerSelect as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect';
export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/LayoutDirection';
export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
export * from './components/ProgressBar';

Also, it should have proper exports in the package.json for the types.

Reproduction/example

https://unpkg.com/@carbon/[email protected]/es/index.d.ts

Steps to reproduce

  1. Go to https://unpkg.com/@carbon/[email protected]/es/index.d.ts
  2. Look in the es/components directory for the package to see that those files are not there.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

@carbon/charts

Code of Conduct

@kuri-sun
Copy link
Contributor

kuri-sun commented Dec 21, 2023

Hello @nstuyvesant!
Once you build the package, those files are going to show up. Just in case, you would like to know how to build the package, I will put the documentation here! (https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md)

So, I think you can close this issue! thank you! ❤️

@nstuyvesant
Copy link
Contributor Author

Hi @kuri-sun - I am building a website that has @carbon/react as a dependency. When I examine what was installed by yarn in my node_modules/@carbon/react/es directory, what I found was there.

Are you saying I have to not only install @carbon/react in my project as a dependency but also separately create a build of it?

@kuri-sun
Copy link
Contributor

Hi @nstuyvesant! Thanks for the reply!
I apologize that I completely misunderstood the issue that you reported.
Yes, you are right. this path resolution is not correctly done.
I am going to take a look at the issue again. I will reply to you back ASAP.
Thank you so much!

@nstuyvesant
Copy link
Contributor Author

@kuri-sun - thanks for the follow up.

@tay1orjones
Copy link
Member

Yeah it looks like the pathing for these is incorrect. That file is a generated one. The build process is probably using some type of inference to generate the paths and it's incorrect for some components.

The list looks like a good bunch of edge cases to look into. For AccordionItem for example, this is a subcomponent that actually lives within the Accordion folder.

We'd appreciate some help looking into why this is happening if someone is interested!

@tay1orjones tay1orjones added the severity: 3 https://ibm.biz/carbon-severity label Jan 3, 2024
@kuri-sun
Copy link
Contributor

Hello @tay1orjones,
I am searching this build behavior is coming from. I assume this is because of Tree-Shaking from the roll-up library but I am not sure. For sure I will take a look at this more.
Related to this, I would like to ask you why we have the "AccordionItem" folder in the react/src/component.
Thank you so much! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ⏱ Backlog
Development

No branches or pull requests

4 participants