Adding a script tag as firstChild of document head via App.jsx - will it always run first?

[ben-dyer]

Question: If I insert a script element before first child of head via document.insertBefore during the render method of App.js in CRA, can I be assured that this script will be the first to run? E.g. something along this line:

const App = () => {
  const script = document.createElement('script', options)
  document.insertBefore(document.head.firstChild, script)
  return <NextAppLayer />
}

Background: I am looking at integrating a CRA with Cookiebot. Cookiebot's installation instructions ask to place a script element at the top of the document head. It's important that Cookiebot's script is the first to load, otherwise their scanner may not detect all cookies present on the page. For a few reasons I don't want to include the required script elements directly in index.html and am instead looking at a solution similar to what is done in this package https://github.com/yeutech-lab/react-cookiebot, or similar to code snippet above.

If index.html was the entry point I would be concerned that the html page is loaded before the react app is rendered. I understand that index.js is the entrypoint for CRA, but beyond that is a bit of a black box for me.