GlSearchBoxByType fails in Nuxt/SSR

In gitlab-org/frontend/pajamas-adoption-scanner!47 (merged) the GlSearchBoxByType component was added to the Pajamas Adoption Scanner, which uses Nuxt to generate a static site. With gitlab-org/frontend/pajamas-adoption-scanner!50 (merged), the ability to load the page with that component pre-filled with text was added (via URL params).

Together, these MRs exposed a bug. Visiting, for instance, /?search=check_id%20co%20%22button%22, caused an error like:

  • Firefox: DOMException: Node.appendChild: Cannot add children to a Comment
  • Chrome: DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

Visiting the site without a query worked as expected, and entering text in the field works fine.

Note also this only affects production builds. Development builds, for some reason, are unaffected.

My suspicion is that this is somehow something to do with GlSearchBoxByType's clear button, which is only visible when there's text. Perhaps its tooltip is involved?

It's unclear to me is why this only manifests on hydrated markup, and only in production builds.

Workaround

One way to work around this is to wrap it in Nuxt's <client-only> component.

Edited by Mark Florian