Webpack: Unable to require pug in javascript file

Question

We are using Jade Templates in our project and Webpack 1 to bundle. Recently we were asked to update Webpack and Jade (which is now Pug). The .pug files are successfully getting converted to HTML but whenever we try to require a .pug file in Javascript it throws the below error:

error in console

ERROR in ./src/commerce/components/myComponent/myTemplate.pug
Module build failed: /Applications/MAMP/htdocs/demo-app/src/commerce/components/myComponent/myTemplate.pug:1
module.exports = "<div class=\"container-fluid\"><div class=\"row\"><div class=\"col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1\"><h3 class=\"heading-text\">FORGOT SOMETHING?</h3><h2 class=\"text\">
                                                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token
    at Object.extractLoader (/Applications/MAMP/htdocs/demo-app/node_modules/extract-loader/lib/extractLoader.js:49:18) 

Angular JS file

var template =require('./myTemplate.pug');
var myComponent =  {
    templateUrl : template,
    controller: controller,
    controllerAs: 'recentctrl',
};

webpack.config.js

{
  test: /\.pug$/,
  use: [
    'file-loader?name=[path]/[name].html',
    'extract-loader',
    'html-loader',
    'pug-html-loader?' + {
      "pretty": true,
      "exports": false
    }
  ]
}

I tried to format the PUG file on http://html2jade.org/ but I'm still getting the same error.

Thanks in advance!