Sweetalert2 in Jade

Question

I'm new to javascript/jade. I'm attempting to create a simple example using sweetalert2 from within a jade template file. When I run the following I receive the 'Help Me' alert but when I get to the swal line I receive:

ReferenceError: swal is not defined

html  
  head
    title= title
    style.
      body {
        font-family: verdanna;
        font-size: 19px;
        background: #aaaaaa;
      }
    link(type='text/css' rel='stylesheet' href='file:///home/dave/css/sweetalert2.css')
  body
    script(src='file:///home/dave/js/sweetalert2.min.js')
    script.
      var func=function() {
        alert('Help me');
        swal('swal help');
    block content
      h2 Hello
      button(onclick='func()') Alert
  footer
    .row
      .col-xs-12
        small © Neo Inc 2017

It should be noted that I'm running this from within an express/node.js based toy application. I've verified that the sweetalert2.css and sweetalert2.min.js files exist by copying the locations from the code and inserting them into another tab on the browser. Any suggestions/help would be appreciated.

Answer 1

The problem is that you can't include files with an absolute file:///... link in modern browsers from sites that are served with the HTTP protocol (source). You need to specify a relative path, e.g. src='../myPage.js'. That path should be relative to the directory the HTML/Pug file is located in.