-
Notifications
You must be signed in to change notification settings - Fork 842
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
EUI Icons not rendering for some users #7852
Comments
For added context, this is occurring in a Next.js project. EUI does not technically support Next.js, so your mileage may vary here. Our dynamically loaded icons cause issues in number of environments, and I'm sure it's related to that. |
@scottybollinger Can you reproduce locally in Next.js, or only on live docs? |
I cannot reproduce locally and have never seen it locally, personally. |
So what is different in the deployed docs vs local? |
Other than the files being hosted locally, nothing. |
From what I observed, it is likely related to Next.js static builds and how the app is hydrated in a browser. As a workaround, I recommend manually importing the icon and passing it to the import { EuiIcon } from '@elastic/eui';
import { icon as checkIcon } from "@elastic/eui/lib/components/icon/assets/check";
const MyComponent = () => (
<EuiIcon type={checkIcon} />
); |
Relates to https://github.com/elastic/docsmobile/issues/856
Describe the bug
We have an intermittent issue where some users see a grey box where icons should be. We've held off on opening the issue because it's so hard to consistently reproduce. We now have a hacky way to at least show what users are seeing. We are still on an old version of EUI but updated our staging server with the latest to confirm the issue still exists. See below.
Impact and severity
This is affecting the public facing docs on multiple pages.
Environment and versions
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Icons render with no gray boxes
Minimum reproducible sandbox
N/A
Screenshots
Video of repro steps:
2024-06-25_14-37-44.mp4
Other screenshot caught in wild. Note that even icons baked into components (dropdown arrows on left) are grayed out:
Additional context
The steps to repo above is the only way we can consistently get the error to occur. We've had several users report it and have yet to have a better way to consistently reproduce. This has been reported by 5-10 users and occurs on mobile Safari as well.
The text was updated successfully, but these errors were encountered: