htmr htmr Not Rendering Tags in Head When Element Key is "0"

htmr Not Rendering Tags in Head When Element Key is "0"

Open yaman3bd opened this issue 1 year ago • 0 comments

I have js and CSS code fetched from CMS, but when I want to render the code into the document head it does not work

import React, { ReactNode, createContext, useEffect } from "react";

import Head from "next/head";
import { useRouter } from "next/router";

import htmr from "htmr";

import { useFetchTenantQuery } from "@/store/slices/api/tenantSlice";

interface ProviderProps {
  children: ReactNode;
}

const renderHtml = (htmlCode: string | null | undefined) =>
  htmlCode && htmr(htmlCode, { dangerouslySetChildren: ["script", "style"] });

const InjectScriptsContext = createContext({});
const InjectScriptsProvider: React.FC<ProviderProps> = ({ children }) => {
  const { data: tenant } = useFetchTenantQuery();

  return (
    <InjectScriptsContext.Provider value={{}}>
      <Head>{renderHtml(tenant?.meta.custom_head_code)}</Head>
      {children}
    </InjectScriptsContext.Provider>
  );
};

export { InjectScriptsProvider, InjectScriptsContext };

not working code example:

<style>
    :root {
    --white: #FFF;
    --gray: #363638;
    --gray-mid: #9D9D9D;
    --gray-dark: #3e3e3e;
    --gray-hover: #F7F7F7;
    --body-background: #1F192D;
    --primary: #8543CC;
    --primary-border: #42375d;
    --text: #CEC0E0;
    --widget-background: #3A2D54;
}
</style>

it work only when I add anything before the style tag, like comments:

<!--Start of CSS code-->
<style>
    :root {
    --white: #FFF;
    --gray: #363638;
    --gray-mid: #9D9D9D;
    --gray-dark: #3e3e3e;
    --gray-hover: #F7F7F7;
    --body-background: #1F192D;
    --primary: #8543CC;
    --primary-border: #42375d;
    --text: #CEC0E0;
    --widget-background: #3A2D54;
}
</style>
<!--End of CSS code-->

the issue seemed to accrue only when I render the code in the head I tried to render the code into body it worked fine, also, I was trying to add scripts to the code like:

<script type="text/javascript">
    console.log("testing head")
</script>
<style>
    :root {
    --white: #FFF;
    --gray: #363638;
    --gray-mid: #9D9D9D;
    --gray-dark: #3e3e3e;
    --gray-hover: #F7F7F7;
    --body-background: #1F192D;
    --primary: #8543CC;
    --primary-border: #42375d;
    --text: #CEC0E0;
    --widget-background: #3A2D54;
}
</style>

the script tag was not rendered, I tried to add a comment before the script tag and everything worked as expected.

I was trying to troubleshoot the issue I found out that the issue happens on the first element only when the key is "0" I tried to create similar elements and set a unique key it worked without any issue:

const someElements = [
    React.createElement("style", {
      //any key other than 0 will work
      key: "1",
      children: null,
      dangerouslySetInnerHTML: {
        __html:
          ":root {\n    --white: #FFF;\n    --gray: #363638;\n    --gray-mid: #9D9D9D;\n    --gray-dark: #3e3e3e;\n    --gray-hover: #F7F7F7;\n    --body-background: #1F192D;\n    --primary: #8543CC;\n    --primary-border: #42375d;\n    --text: #CEC0E0;\n    --widget-background: #3A2D54;\n}"
      }
    }),
    React.createElement("script", {
      type: "text/javascript",
      key: "2",
      children: null,
      dangerouslySetInnerHTML: {
        __html: 'console.log("testing head")'
      }
    })
  ];

Dec 16 '23 07:12 yaman3bd

htmr htmr copied to clipboard

htmr Not Rendering Tags in Head When Element Key is "0"

htmr
htmr copied to clipboard