title: Critical dependencies - the request of a dependency is an expression Webpack
body: <p>I am using a service in my <code>angular</code> application to create <code>uibModal</code> as follows</p>
  
  <pre><code>function modal(modalConfig){
                    var modalInstance = $uibModal.open({
                    animation: true,
                    template: require("../a/b/xyz.html"),
                    controller: modalConfig.controller,
                    size: modalConfig.size,
                    controllerAs: modalConfig.controllerAs,
                    bindToController : true,
                    resolve: modalConfig.resolveObj
  
                  });
              }
  </code></pre>
  
  <p>Please note the line </p>
  
  <pre><code> template: require("../a/b/xyz.html"),
  </code></pre>
  
  <p>I want to use a variable in its place like this </p>
  
  <pre><code> template: require(modalConfig.templateUrl),
  </code></pre>
  
  <p>but when i use a variable in place of hard coded value <code>webpack</code> gives me </p>
  
  <pre><code>Critical dependencies:
  83:22-54 the request of a dependency is an expression
  </code></pre>
  
  <p>I am not able to resolve this error. What can be the possible reason for it?</p>
  
  <p>I have used <code>node-express</code> server for continuous <code>webpack</code> builds. I have looked at other answers too but they didn't solve my query.</p>