0

In my next js application i would like for a script tag to be loaded and some javascript to be executed. what i have in my next js component is as follow :-

typeof window !== 'undefined' ? <div data-id='text_div_for_testing_only' dangerouslySetInnerHTML={{ __html: product.description }}></div> : null

The contents of product.description is as follows :-

<script>alert("I am the richtextbox alert")</script>

What i see in the HTML is basically this

<script>alert("I am the richtextbox alert")</script>

Unfortunately, the javascript never gets executed. However, if i do the following :-

typeof window !== 'undefined' ? alert("ok alert me") : null

I do see an alert in the UI. So why does dangerouslySetInnerHTML not execute the javascript in nextjs ?

P.S. also can't use Script from nextjs as i'am using a lower version of nextjs.

Alexander Solonik
  • 9,466
  • 17
  • 65
  • 157
  • 1
    Probably because it is only a wrapper for innerHTML, and setting innerHTML does simply not execute scripts, https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml – CBroe May 10 '22 at 09:42

0 Answers0