Describe the Bug
In src/features/bubble/components/Bubble.tsx, the code uses createEffect to dynamically inject a viewport <meta> tag into the host document's <head>. It attempts to clean up the tag by returning a function from the effect.
While returning a function works for cleanup in React (useEffect), Solid.js ignores the return value of createEffect. As a result, the cleanup function is never executed.
Code Snippet
Current Implementation (src/features/bubble/components/Bubble.tsx):
// Add viewport meta tag dynamically
createEffect(() => {
const meta = document.createElement('meta');
// ...
document.head.appendChild(meta);
// ❌ Solid.js ignores returned functions, so this never runs
return () => {
document.head.removeChild(meta);
};
});
Impact
Every time the chat widget is mounted, a new tag is permanently injected into the host website's DOM. If the widget is unmounted and remounted (or if the effect were to ever re-trigger), it pollutes the host with duplicate meta tags, which can interfere with the host site's own responsive design rules.
Proposed Solution
Replace createEffect with onMount, and use Solid.js's native onCleanup hook to correctly handle the removal of the DOM element.
onMount(() => {
const meta = document.createElement('meta');
// ...
document.head.appendChild(meta);
// ✅ Correct Solid.js cleanup
onCleanup(() => {
document.head.removeChild(meta);
});
});
I have this fixed locally and can submit a PR right away if this looks good to you!
Describe the Bug
In
src/features/bubble/components/Bubble.tsx, the code usescreateEffectto dynamically inject a viewport<meta>tag into the host document's<head>. It attempts to clean up the tag by returning a function from the effect.While returning a function works for cleanup in React (
useEffect), Solid.js ignores the return value ofcreateEffect. As a result, the cleanup function is never executed.Code Snippet
Current Implementation (
src/features/bubble/components/Bubble.tsx):Impact
Every time the chat widget is mounted, a new tag is permanently injected into the host website's DOM. If the widget is unmounted and remounted (or if the effect were to ever re-trigger), it pollutes the host with duplicate meta tags, which can interfere with the host site's own responsive design rules.
Proposed Solution
Replace createEffect with onMount, and use Solid.js's native onCleanup hook to correctly handle the removal of the DOM element.
I have this fixed locally and can submit a PR right away if this looks good to you!