It seems that react-helmet-async doesn't keep the order of the scripts added in the jsx

[meesfrenkelfrank]

I am using react-helmet-async to add three scripts in order to the HEAD element on a specific page in my React app:

import React from 'react';

import { Helmet } from 'react-helmet-async';

import { Props } from './Advertising.types';

const MyComponent = ({ id, type }: Props) => {
  return (
    <Helmet>
  <script>{`var myData = { "id":"${id}", "type":"${type}" };`}</script>
  <script src="https://thirdparty.com/js/main.js" />
  <script
    type="application/javascript"
    src="thirdparty2.com/main.js"
  />
</Helmet>
  );
};

When navigating to a page the first <script> tag is rendered as last in the dom. But it should be rendered first. So it's not respecting the order, added in the jsx. What could be the issue?

(When refreshing the page manually the script tags are in correct order).

[sejas]

I encountered the same issue. Sometimes my second stylesheet, main_window.css, loads before the first one, which breaks my styles.

<Helmet>
	<link
		rel="stylesheet"
		href={
			i18n?.isRTL()
				? '/main_window/styles/wordpress-components-style-rtl.css'
				: '/main_window/styles/wordpress-components-style.css'
		}
	/>
	<link rel="stylesheet" href="/main_window.css" />
</Helmet>

A possible workaround is updating all the children elements, so they are re-inserted in the same order.