-
Notifications
You must be signed in to change notification settings - Fork 661
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scripts are not loaded synchronously within the same Helmet component #419
Comments
Unfortunately this is a known issue. We need to do a better job at communicating this bug to the everyone. Note to self add a FAQ to the readme related to this bug. |
@tmbtech definitely :) I was looking for it through the issues and did not found it |
In the meantime, internally we do something similar to this , maybe it'll help.
or depending on your case, you might just want to load the script in the html template? idk just throwing out ideas. goodluck. |
Any workaround? |
Still having the same issue here. Edit: Since I didn't find any workaround, I created one myself, with the package react-append-head |
Still have this issue. I have a bunch of |
It seems that the script elements created by helmet have the |
@zub2 setting |
did you pass |
This bug seems pretty old. Any update on this? |
Super annoying that this is still a thing and that it's not documented in any obvious way. Took me way too long to figure out what was going on with my scripts. The readme says "Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly." But plain HTML script tags load synchronously, and Helmet changes this behavior on the sly; that's not simple or beginner friendly. |
Super annoying |
Just found this. The const handleScriptLoaded = () => { console.log("**** LOADED"); }; <Helmet>
<script src="https://domain.com/path/to/script.js" onLoad={handleScriptLoaded} type="text/javascript" />
</Helmet> Creates the element: <script src="http://app.thermoform.localhost/auth/js/api.js" onload="() => {
console.log("*** LOADED");
}" type="text/javascript" data-rh="true"></script> This is completely unusable. |
just another workaround i'm giving my script setTimeout with 50ms, and it's worked fine and still acceptable on my side |
There was no workaround so this is what I used: function getScript(script: string) {
return new Promise((resolve, reject) => {
const $script = document.createElement('script');
$script.onload = resolve;
$script.onerror = reject;
$script.src = script;
document.head.appendChild($script);
});
}
function useScripts(user_scripts: string[]) {
useLayoutEffect(() => {
const scripts = [...user_scripts];
(function loop() {
if (scripts.length) {
const script = scripts.shift();
getScript(script).then(loop);
}
})();
}, []);
} |
You can add a listener in the Helmet and use react states to check if the first script is loaded before executing the second . To do so use the |
I would like to inject 2 script tags like this:
jQuery is just an example
After the first script is loaded I want to execute the second inline script. Normally, when you put 2 scripts into HTML without any async or defer they will load synchronously.
Currently both scripts will be executed asynchronously. See reproduction here - https://codesandbox.io/s/l9qmrwxqzq
The text was updated successfully, but these errors were encountered: