Gatsby embed forms with script tag in react-helmet

Question

I am trying to embed some forms using react helmet.

My code looks like this:

<Helmet>
         <script type="text/javascript">
            {var FORMID;
            (function(d, t) {
              var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
              s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
              s.onload = s.onreadystatechange = function() {
                var rs = this.readyState;
                if (rs) if (rs != 'complete') if (rs != 'loaded') return;
                try {
                  FORMID = new WufooForm();
                  FORMID.initialize(options);
                  FORMID.display();
                } catch (e) { }
              };
              var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
              par.insertBefore(s, scr);
            })(document, 'script');}
          </script>
</Helmet>

The script is a copy and paste from wufoo form builder. (I replaced the username and form id with the all caps FORMID and USERNAME).

I keep running into errors. Right now this will produce a graphql error (there is not graphql in the page)

There was a problem parsing "/../my-page"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

and a Module build failed error.

In VS code I get some warnings on the var's saying expression expected. And some other spots where it expects a { or a }. I'm pretty certain the brackets all match up. Again, it's copy and paste from wufoo and this works in plain html/js.

Answer 1

Wrap your script with backticks (`):

<Helmet>
         <script type="text/javascript">
            {`var FORMID;
            (function(d, t) {
              var s = d.createElement(t), options = { 'userName':'USERNAME', 'formHash':'FORMID', 'autoResize':true, 'height':'751', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true };
              s.src = ('https:' == d.location.protocol ?'https://':'http://') + 'secure.wufoo.com/scripts/embed/form.js';
              s.onload = s.onreadystatechange = function() {
                var rs = this.readyState;
                if (rs) if (rs != 'complete') if (rs != 'loaded') return;
                try {
                  FORMID = new WufooForm();
                  FORMID.initialize(options);
                  FORMID.display();
                } catch (e) { }
              };
              var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;
              par.insertBefore(s, scr);
            })(document, 'script');`}
          </script>
</Helmet>