RuxIcons do not appear properly in production build of Create React App
kiley-mitti opened this issue · 3 comments
Describe the bug
When using CRA as the basis for creating a new React project, RuxIcons show up fine in dev, but in production they disappear.
To Reproduce
Steps to reproduce the behavior:
- spin up a create react app
- install @astrouxds/react
- import { RuxIcon } into your App
- use in your application
Current behavior
RuxIcons should appear in production build
Expected behavior
They do not.
CodeSandbox
If applicable, please provide a CodeSandbox or other online code editor tool link that contains an example of the bug.
Because the problem only reveals itself in production, I've produced a bare bones CRA with @astrouxds/react installed and deployed it to illustrate:
Example: React CRA Example
Repository: kiley-mitti/icon-test
Environment (please complete the following information):
- Browser [e.g. chrome, safari] All
- @astrouxds/astro-web-components version [e.g. 7.0.0] 7.9.0
- Framework, if applicable (React, Angular, Vue, Svelte, ect) React
- Framework wrapper version, if applicable @astrouxds/react
Additional context
I suspect tree shaking is the culprit. Shook tree too hard.
- Does it work in 7.7.0 (before we changed to the treeshake build under the hood)?
- Does this only affect prod builds (dev builds still work?)
technically this is the feature, you always had to manually import individual icons in addition to rux-icon when treeshaking https://astro-components.netlify.app/?path=/docs/components-icons--default-story#cherry-picking
where it might be confusing though is that consumers of @astrouxds/react might not have been aware that they weren't actually using the treeshaking build, even though they still had to manually import individual components
@kiley-mitti when you get some time, could you verify that the latest version of @astrouxds/react fixes this problem?
Sure thing! I made a new CRA with latest version of @astrouxds/react and it appears to work in dev and build!