iX[2.0.4] in React production build showToast error.

[mhmmdkndr]

What happened?

Hello iX Team,

We are using iX[2.0.4] in React. We encounter an error in the Toast component as in the picture below. All of the packages we build with "npm run build" have a similar situation, including the code on the ix webpage (https://ix.siemens.io/docs/controls/toast).
Someone can suggest any solution? Thanks in advance.

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

React

Which version of iX do you use?

2.0.4

Code to produce this issue.

https://stackblitz.com/run?file=src%2Ftoast.tsx

[jul-lam]

When I run npm run build inside the react example from the documentation in Stackblitz, no error is thrown. However, a warning is displayed, which is not a problem in this case. The issue might be with the setup of the project you used to build the code. Can you please provide more details about it?

[robert-wettstaedt]

@jul-lam here is a working example. It's just a project generated by create-react-app with @siemens/ix-react@2.0.4. The app has been built and is served from the build folder. Check the browser console when you click the button.

[jul-lam]

Thank you for providing the example! We will investigate the issue.

[mohitmutha]

We are facing the same issue. We are using vite for creating the project.

[mohitmutha]

Found a workaround. Not sure if this is the intended way to use the component.

When I add a IxToastContainer element to somewhere in the skeleton of the application the toast starts working. My guess is that when the element is created dynamically the class behaviour is getting lost and hence the issue.

Strangely this happens only in the transpiled build after running yarn build. When running in dev mode it works fine.

Please add a fix or modify the documentation.

[robert-wettstaedt]

@mohitmutha that seems to be right!

However, it is important to note, that you cannot wrap it around your application as in:

<IxToastContainer>
  <Application />
</IxToastContainer>

Instead it needs to be its own enclosed tag sitting next to your application:

<>
  <IxToastContainer />
  <Application />
</>

The reason is that the component does not render its children. For some reason the line to do that is commented out.

[danielleroux]

We will do some refactorings regarding appending dynamic component, this refactorings will solve the issue. It is planned for the next releases.

[IX-822]

[dogukan-duduoglu]

Anyone having problems with icons not showing after building with the workaround?

[robert-wettstaedt]

Anyone having problems with icons not showing after building with the workaround?

@dogukan-duduoglu No I did not experience this