Icons are missing

[cerenbattal]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Hi, We develop a product with React. We use webpack as a module bundler. However, we are having issues displaying ix icons. Sometimes they are completely missing on the whole UI. We do not have any specific case or scenario to reproduce this issue. Please see the screenshots below:

The icons that are on the screenshots above (and all the icons on our UI) are all IxIcon components. They are gone sporadically on all the UI. Here is our package.json:

"devDependencies": {
     .....
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "echarts-for-react": "^3.0.2",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.18",
    "postcss-loader": "^7.0.1",
    "prettier": "2.7.1",
    "react-chartjs-2": "^5.2.0",
    "react-refresh": "^0.14.0",
    "react-transition-group": "^4.4.5",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.4.1",
    "terser-webpack-plugin": "^5.3.6",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0" 
     .....
 },
  "dependencies": 
    .....
    "@siemens/ix-echarts": "^2.1.1",
    "@siemens/ix-icons": "^2.2.0",
    "@siemens/ix-react": "^2.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
     .....
  }, 

What type of frontend framework are you seeing the problem on?

React

Which version of iX do you use?

v2.4.0

Code to produce this issue.

This issue happens on our private repository. Here is the smallest codesandbox that I can create:

https://codesandbox.io/p/devbox/pl3yt6

[matthiashader]

Hello @cerenbattal, thanks for your insights - I’ve attempted to recreate the issue across different browsers and frameworks, but so far, I haven’t been able to replicate it. Also your code sandbox seems to work just fine on my site, can you verify that the icon in your code sandbox is not working? Otherwise i would recommend trying to upgrade to the newest iX version an see if this resolves your problem.

[cerenbattal]

Hi @matthiashader, unfortunately, we do not have any reproducing steps for this bug. It just happens sporadically. I've just installed all the required npm packages on the code sandbox with the exact versions that we use on our project. I assume that this bug might not be related to the device's OS version. But I want to ask anyway, is there any possibility?

[cerenbattal]

Hi @matthiashader, unfortunately, we do not have any reproducing steps for this bug. It just happens sporadically. I've just installed all the required npm packages on the code sandbox with the exact versions that we use on our project. I assume that this bug might not be related to the device's OS version. But I want to ask anyway, is there any possibility?

Do you still recommend upgrading iX to 2.5.0?

[matthiashader]

Hello @cerenbattal - yes, I would at least try. Alternatively, I can offer you to write to our team email to organize a call so we can check it together. Without any possibility of reproducing the issue, it’s really hard to say where the problem is. (team.ix.industry@siemens.com)

[cerenbattal]

Hello @cerenbattal - yes, I would at least try. Alternatively, I can offer you to write to our team email to organize a call so we can check it together. Without any possibility of reproducing the issue, it’s really hard to say where the problem is. (team.ix.industry@siemens.com)

Hi @matthiashader,

I got the same error today. We use ix-react 2.5.0.

This is the error line in the chunk file:

As I said, we use webpack.

[matthiashader]

Hello @cerenbattal - i have looked into your code example, i would adapt the main.jsx to: ` import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import "@siemens/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css"; import { defineCustomElements as themeDefineCustomElements, } from "@siemens/ix-brand-theme/loader"; import { defineCustomElements } from "@siemens/ix-icons/loader";

defineCustomElements(); themeDefineCustomElements();

createRoot(document.getElementById("root")).render(

); `

I have also prepared the simplest example i can: https://github.com/matthiashader/react-webpack-from-scratch

If this error still occur, just let me know.