How to debug weird <Script> behaviour?
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Hi, my page currently has a <Script/> tag that loads an external script in a client component.
This script should
1. Provide tooltips for specific <a> tags
2. Change the same tags at runtime to include an icon
My page is first generated statically from a MDX file. The first time I open it the tooltip correctly shows, but the icons aren't working. (see 1st image).
If I reload the page however, then everything works fine and the icons are shown (see 2nd image)
I tried forcefully refreshing the page like this:
But it doesn't seem to work.
Any ideas on how can I debug it and whats going on here?
This script should
1. Provide tooltips for specific <a> tags
2. Change the same tags at runtime to include an icon
My page is first generated statically from a MDX file. The first time I open it the tooltip correctly shows, but the icons aren't working. (see 1st image).
If I reload the page however, then everything works fine and the icons are shown (see 2nd image)
I tried forcefully refreshing the page like this:
<Script
src="https://wow.zamimg.com/widgets/power.js"
strategy="afterInteractive"
onLoad={() => {
setRefresh(true)
}}
/But it doesn't seem to work.
Any ideas on how can I debug it and whats going on here?
2 Replies
Brown bearOP
Ok, after some more debugging it looks like the script is not being loaded the first time
Neither of the logs are showing
<Script
src="https://wow.zamimg.com/widgets/power.js"
strategy="afterInteractive"
onLoad={() => {
console.log('loaded')
setScr(true)
}}
onError={() => {
console.log('error')
}}
/>Neither of the logs are showing
Any idea as to why?