Skip to content

bug: Viewport meta tag is never removed (Solid.js cleanup memory leak) #380

@SyncWithRaj

Description

@SyncWithRaj

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions