Using jquery in phtml got an error: Uncaught ReferenceError: require is not defined

Question

I use jquery in my phtml frontend page like this:

<script>
 require(['jquery', 'jquery/ui'], function($){
 var currentUrl = '<?= $itemEditUrl ?>';
 $('#link-cusom-campaign').click( function(e) {
 e.preventDefault();
 var check = 1;
 var optionsInput = '';
 $('select[name^="options"]').each(function() {
 if($(this).val() == ''){
 check = 0;
 $("<p style='color:red;' class='alert-empty'>This is a required field</p>").insertAfter(this).delay(3000).fadeOut();
 } else {
 var name = $(this).attr('name');
 var id = parseInt(name.match(/[0-9]+/));
 optionsInput += '<input type="text" name="options['+id+']" value="'+$(this).val()+'"/> ';
 }
 });
 if(check == 1){
 var model = $('#select_18').val();
 var qty = $('#qty').val();
 var getUrl = currentUrl + '?model=' +model+'&qty=' + qty;
 var form = $('<form action="' + currentUrl + '" method="post">' +
 optionsInput +
 '<input type="text" name="qty" value="' + qty + '" />' +
 '</form>');
 $('body').append(form);
 form.submit();
 }
 });
 });
</script>

all the function work properly, but in my browser console i got an error pointing at require saying :

VM4522:2 Uncaught ReferenceError: require is not defined

• Toan Nguyen: Which line it's pointing to when you clicked to VM4522:2 Uncaught ReferenceError: require is not defined? And did you clear the static content, redeploy it after your changes were made?
• Hunter: @ToanNguyen the 2nd line require(['jquery', 'jquery/ui'], function($){, ive dont static content deploy numerous time
• Toan Nguyen: Please execute bin/magento setup:upgrade (to remove static, generation, someother temporary files), then bin/magento setup:static-content:deploy and see if this error still happens.
• Qaisar Satti: check this github.com/magento/magento2/issues/1321
• Toan Nguyen: @QaisarSatti: Not that issue, obviously.

Answer 1

Try something like this

requirejs(['require'], function (require) {
 require(['jquery', 'jquery/ui'], function ($) {
 var currentUrl = '<?= $itemEditUrl ?>';
 $('#link-cusom-campaign').click(function (e) {
 e.preventDefault();
 var check = 1;
 var optionsInput = '';
 $('select[name^="options"]').each(function () {
 if ($(this).val() == '') {
 check = 0;
 $("<p style='color:red;' class='alert-empty'>This is a required field</p>").insertAfter(this).delay(3000).fadeOut();
 } else {
 var name = $(this).attr('name');
 var id = parseInt(name.match(/[0-9]+/));
 optionsInput += '<input type="text" name="options[' + id + ']" value="' + $(this).val() + '"/> ';
 }
 });
 if (check == 1) {
 var model = $('#select_18').val();
 var qty = $('#qty').val();
 var getUrl = currentUrl + '?model=' + model + '&qty=' + qty;
 var form = $('<form action="' + currentUrl + '" method="post">' +
 optionsInput +
 '<input type="text" name="qty" value="' + qty + '" />' +
 '</form>');
 $('body').append(form);
 form.submit();
 }
 });
 });
});

• Ben Crook: It doesn't seem right for Require JS to require Require JS (sounds like a tongue twister), even if this works it seems like more of a workaround than a fix :(