How to write multi-line scripts in Pug and Facebook JS SDK

Question

I'm trying to include a multi-line JavaScript function inside the script tag within my layout pug template. It needs to run in the script tag, i.e. it has to be done this way and cannot be passed into the template as a value, since it's client-side logic within a node app.

This is the equivalent in vanilla HTML:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1111111',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v5.0'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Since I'm using pug and not plain HTML I can't get the formatting right and it doesn't work. The pug docs have only very basic examples such as:

 script
      include script.js

And

  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

This is my current pug file and my latest attempt to get it to work.

layout.pug

doctype html
html
  head
  body
  script
    //works - just testing
    - const x = 1
    //works - just testing
    - function test(){console.log('test')}
    //error - not a real error. Seems like syntax
    // Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico
    - function testWrapper(){
        window.fbAsyncInit = function() {
          FB.init({
            appId            : '1111111',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v4.0' 
          });
        }
      }
    - testWrapper()
  // not sure if this is working, but I don't think so.
 script(async defer src="https://connect.facebook.net/en_US/sdk.js")

How can I get this to work?

This is the Facebook JS SDK that I am trying to use here.

Note: I suggest this is not a duplicate of this due to the slightly more involved nature of the JS code being inserted in the script tag.

Pug is very sensitive to indentation. The code above puts the script tag as a peer to the body tag, therefore it is not in a place that the browser will load it. Indent it two more to make it work. I voted to close this Question as it was caused by a small typographical error. — Graham, Oct 30 '19 at 01:45
Yep. Close it. My question should have been "How to write functions inside script tags in pug" to be more useful.. — Mote Zart, Oct 30 '19 at 03:56
It needs five votes to close then someone else to come in and delete. You can save the community this effort by just deleting the question yourself. — Graham, Oct 30 '19 at 05:32
Since it has an upvote now it must mean it was useful to someone, so I won't delete it. I am going to restructure the question to make it less specific to a single instance (and thus kind of useless) and make it more generally about how to write JS inside a script tag in pug, which I could not find much documentation about, and could be something useful to others. Hopefully this is a middle ground. — Mote Zart, Nov 02 '19 at 22:13

Mote Zart · Accepted Answer · 2021-01-16T05:12:55.717

I think I solved it using my very first solution attempt from 2 hours ago. It didn't work then but the spacing must have been off and thrown an error, but also it seems to need that script. to work, so it was not only spacing. Now I get 200s to the FB SDK so it must be working.

Include SDK code in pug like this I think:

script. 
      window.fbAsyncInit = function() {
        FB.init({
          appId            : '111111',
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v5.0'
        });
      };
 script(async defer src="https://connect.facebook.net/en_US/sdk.js")

Note: I want to give credit for this solution to this Stack Overflow post. I didn't see this script. in the pug docs so I appreciate @Felipe-sabino for pointing me to it.

How to write multi-line scripts in Pug and Facebook JS SDK

1 Answers1