svelte - Nested component's onMount() not executing imported from external application

Question

We are working a component library that could be used in several of our applications.

This component library has two components:

• InjectSVG accepts an icon URL. On initial load of the component, it adds an img tag to the DOM and then it fetches the SVG in the onMount lifecycle hook and replaces it with the retrieved SVG contents inline (better for styling, etc).
• Button accepts text and an optional icon. If present, the icon prefixes the text on the button using the InjectSVG component.

In client applications, when using InjectSVG itself, everything works as expected. However, if we try to use Button, the InjectSVG component renders the original img tag in the DOM, but never executes the onMount callback, so the img tag is never replaced.

An example of the setup can be seen here, but the "error" is not demonstrated because all components are in the "same app". This only occurs when we are trying to import these components into another application and leverage them.

Any suggestions on why this would be happening or where to look?

question from:https://stackoverflow.com/questions/65617208/nested-components-onmount-not-executing-imported-from-external-application

Answer 1

Waitting for answers