Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[URGENT] react-toast is injected to DOM by default causes multiple web app using Style UI 2.x to fail on load

See original GitHub issue

Business Impact

An on going issue on all deployed environments (dev, stage, prod)
Blocking teams from adopting Styled UI 2.x

Problem

Root Cause

react-toast component is injected to DOM by default when using Styled UI even if web application doesn’t use Toast component.

<html class="ext-strict">
  <head>
    ...
  </head>
  <body>
    <header id="top-header">...</header>
    <main id="app" class="app">...</main>
    <div id="react-toast" class="Toaster">  <!-- <==== injected to DOM by default when using Styled UI -->
      ...
    </div>
  </body>
</html>

The underlying 3rd party library toast-note used by Toast component has the assumption that Toast component is only used by a single web app with a fixed ID: https://github.com/bmcmahen/toasted-notes/blob/master/src/Alert/Toast.tsx#L27

Effect & Impact

This becomes an issue if we dynamically mount and unmount microfrontend web apps (e.g. with single-spa) that uses Styled UI, as single-spa is the container for it.
<body> element in DOM is littered with instance of react-toast element injected from last microfrontend web apps using Styled UI

Reproduced Steps

The reproduced steps are very simple and captured on the internal JIRA, since it’s causing an incident and impacting our production environment, those details are only shared within the JIRA case. Please consult @ultralabed for detail.

Proposed Solutions

Workaround

Change the default behaviour of Styled UI so it does not inject Toast component by default. However, without the proper fix (as proposed below) the of root cause, the problem will against resurface if multiple web app begin using Toast component.

Proper Fix on the Root Cause

Fork the 3rd party library toast-note of that toaster component and modify the code to be able to pass in an ID where to inject the toast component. OR
Find a new (and better) 3rd party component that only adds the notification component to the DOM on demand and removes itself from DOM immediately afterwards.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

chetoncommented, Sep 7, 2020

Resolved in https://github.com/trendmicro-frontend/styled-ui/commit/2a90d3f1959a0c5af297d9220797a53beef068d8

It will be available in v0.8 or a later release.

1reaction

gsarancommented, Aug 12, 2020

As an update to the previous comment by @joyfulelement, I further extended the exact import to be used for each component and not just theme. For instance, an application using multiple components like Box, Menu, MenuList etc. needs to do exact import for each component:

import Box from '@trendmicro/react-styled-ui/Box'; 
import Menu from '@trendmicro/react-styled-ui/Menu'; 
import MenuList from '@trendmicro/react-styled-ui/Menu/MenuList';

Although, it makes code bit clumsy but it’s a temporary fix for now to avoid injection of Toast element into the DOM.