htmr
htmr copied to clipboard
Published
20 hours ago •
pveyes
pveyes
htmr Not Rendering Tags in Head When Element Key is "0"
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")'
}
})
];
