Components not being rendered

I have encountered a behavior to investigate further:

const DynamicPageMeta = component(({ currentPath, slug, language }) => {
  const { data } = useCatalogQuery(catalogQueries.product, { slug })
  if (!data) {
    return null
  }

  const product = data[0]
  if (detectIsUndefined(product)) {
    return null
  }
  console.log('data exists') // this appears in the console

  return (
    <>
      <DynamicPageOpenGraphMeta currentPath={currentPath} slug={slug} language={language} />
      <DynamicPageTwitterMeta slug={slug} language={language} />
    </>
  )
})

This is the component in which the issue was identified. The DynamicPageOpenGraphMeta is rendered correctly, the DynamicPageTwitterMeta is not rendered.

const DynamicPageTwitterMeta = component(({ slug, language }) => {
  console.log('DynamicPageTwitterMeta rendered') // this does not appear in the console

Adding a Fragment between the 2 components solves the issue, and DynamicPageTwitterMeta is rendered.

  return (
    <>
      <DynamicPageOpenGraphMeta currentPath={currentPath} slug={slug} language={language} />
      <></> {/* This fragment seems to solve the issue */}
      <DynamicPageTwitterMeta slug={slug} language={language} />
    </>
  )

Adding a null between the 2 components also seems to solve the issue

  return (
    <>
      <DynamicPageOpenGraphMeta currentPath={currentPath} slug={slug} language={language} />
      {null}
      <DynamicPageTwitterMeta slug={slug} language={language} />
    </>
  )

This tree is rendered with renderToString.

The resulting function after bundling is as follows:

var DynamicPageMeta = component(({ currentPath, slug, language }) => {
  const { data: data5 } = useCatalogQuery(catalogQueries.product, { slug });
  if (!data5) {
    return null;
  }
  const product = data5[0];
  if (detectIsUndefined(product)) {
    return null;
  }
  return jsx(Fragment, {
    children: [
      jsx(DynamicPageOpenGraphMeta, {
        currentPath,
        slug,
        language
      }, undefined, false, undefined, this),
      jsx(DynamicPageTwitterMeta, {
        slug,
        language
      }, undefined, false, undefined, this)
    ]
  }, undefined, true, undefined, this);
});

Adding the fragment results in this:

  return jsx(Fragment, {
    children: [
      jsx(DynamicPageOpenGraphMeta, {
        currentPath,
        slug,
        language
      }, undefined, false, undefined, this),
      jsx(Fragment, {}, undefined, false, undefined, this),
      jsx(DynamicPageTwitterMeta, {
        slug,
        language
      }, undefined, false, undefined, this)
    ]
  }, undefined, true, undefined, this);

Adding the null results in this:

  return jsx(Fragment, {
    children: [
      jsx(DynamicPageOpenGraphMeta, {
        currentPath,
        slug,
        language
      }, undefined, false, undefined, this),
      null,
      jsx(DynamicPageTwitterMeta, {
        slug,
        language
      }, undefined, false, undefined, this)
    ]
  }, undefined, true, undefined, this);

I can provide a replication in private shortly, a public replication will require more time.

atellmer / dark

Components not being rendered #84