fix(bubble): properly clean up viewport meta tag on unmount#393
fix(bubble): properly clean up viewport meta tag on unmount#393SyncWithRaj wants to merge 3 commits into
Conversation
Replaced createEffect with onMount and used Solid.js's native onCleanup to ensure the dynamically injected viewport <meta> tag is properly removed from the DOM when the widget is unmounted. Solid.js ignores returned functions in createEffect, which previously caused a new meta tag to be permanently left in the document head every time the chat widget mounted.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the dynamic viewport meta tag insertion in the Bubble component by replacing createEffect with onMount and nested onCleanup. The review feedback suggests a safer approach to removing the meta tag by using meta.remove() instead of document.head.removeChild(meta) to prevent potential DOM exceptions.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
|
||
| return () => { | ||
| onCleanup(() => { | ||
| document.head.removeChild(meta); |
There was a problem hiding this comment.
Using document.head.removeChild(meta) can throw a NotFoundError DOMException if the meta tag has already been removed or detached from the document head by another script or parent container cleanup. Using meta.remove() is a safer, more defensive alternative that gracefully handles cases where the element is no longer in the DOM.
| document.head.removeChild(meta); | |
| meta.remove(); |
1 participant
Describe the Bug
In
src/features/bubble/components/Bubble.tsx, the code usedcreateEffectto dynamically inject a viewport<meta>tag into the host document's<head>. It attempted 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 was never executed.Impact
Every time the chat widget was mounted, a new tag was permanently injected into the host website's DOM. If the widget was unmounted and remounted, it polluted the host with duplicate meta tags, which could interfere with the host site's own responsive design rules.
Solution
createEffectwithonMount.onCleanuphook to correctly handle the removal of the DOM element upon unmount.createEffectimport.fixes #380