Critical dependency: the request of a dependency is an expression on jQuery Form Validator plugin

Question

I have problem on loading security module from jQuery Form Validator plugin :

$.validate({
    modules : 'security'
});

I'm using webpack and Laravel-mix for boundeling my files and I got this error:

Critical dependency: the request of a dependency is an expression.

Every thing is fine and even the validations is working but this warning might break some other files to be bundled.

I found that this is problem with loadModules function .

Answer 1

Here is how you can fix it: Instead of loading the whole security.js or other modules you should grape your validation from that module instead of loading it all and then add it to your main js file. Here I need confirmation from security.js:

import './form-validation';
  $.formUtils.addValidator({
name: 'confirmation',
validatorFunction: function (value, $el, config, language, $form) {
  var password,
    passwordInputName = $el.valAttr('confirm') ||
      ($el.attr('name') + '_confirmation'),
    $passwordInput = $form.find('[name="' + passwordInputName + '"]');
  if (!$passwordInput.length) {
    $.formUtils.warn('Password confirmation validator: could not find an input ' +
      'with name "' + passwordInputName + '"', true);
    return false;
  }

  password = $passwordInput.val();
  if (config.validateOnBlur && !$passwordInput[0].hasValidationCallback) {
    $passwordInput[0].hasValidationCallback = true;
    var keyUpCallback = function () {
      $el.validate();
    };
    $passwordInput.on('keyup', keyUpCallback);
    $form.one('formValidationSetup', function () {
      $passwordInput[0].hasValidationCallback = false;
      $passwordInput.off('keyup', keyUpCallback);
    });
  }

  return value === password;
},
errorMessage: '',
errorMessageKey: 'notConfirmed'
});


$.validate({
 form: '#signup-header',
});