I am getting Uncaught ReferenceError: require is not defined

Question

please anyone can help me here, I am getting the require undefined in js, below is my code. Thank you

           <script>
            require([
            "jquery", 
            "mage/translate", 
            "mage/adminhtml/events", 
            "mage/adminhtml/wysiwyg/tiny_mce/setup"
            ], function(jQuery){
                wysiwygCompanyDescription = new wysiwygSetup("company_description", {
                    "width":"100%",
                    "height":"200px",
                    "plugins":[{"name":"image"}],
                    "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
                    }
                });
                wysiwygCompanyDescription.setup("exact");
            });
        </script>

Please check these 2 codes snippets.

<script id="wk-region-dropdown" type="text/x-magento-template">
<% _.each(data, function(key, value) { %>
    <option value="<%- value %>"><%- key %></option>
<% }); %>

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/alert',
        "mage/template"
    ], function($, alertBox, template) {
        var defaultLogo = "<?php echo $defultLogo; ?>";
        var sellerLogo = "<?php echo $sellerLogo; ?>";
        var warningLabel = "Warning";
        var regions = <?php echo json_encode($regions); ?>;
        $(document).ready(function() {
            var val = $(".wk-country-field select").val();
            // manageState($(".wk-country-field select"), val);
            $("body").on("change", ".wk-country-field select", function() {
                var val = $(this).val();
                manageState($(this), val);
            });
        });

        function manageState(currentObject, val)
        {
            var html = "";
            if (val in regions) {
                var regionTemplate = template('#wk-region-dropdown');
                var dropdownHtml = regionTemplate({ data: regions[val] });
                currentObject.parent().parent().parent().find(".wk-state-field input").hide();
                currentObject.parent().parent().parent().find(".wk-state-field select").empty();
                currentObject.parent().parent().parent().find(".wk-state-field select").append(dropdownHtml);
                currentObject.parent().parent().parent().find(".wk-state-field select").show();
            } else {
                currentObject.parent().parent().parent().find(".wk-state-field input").show();
                currentObject.parent().parent().parent().find(".wk-state-field select").hide();
            }
        }

        var acceptedImageType = ["png", "jpg", "jpeg", "gif"];
        $("body").on("change", ".wk-logo-image-block input", function () {
            var imageName = $(this).val();
            var result = imageName.split(".");
            var length = result.length;
            var currentObject = $(this);
            var ext = result[length-1];
            ext = ext.toLowerCase();
            if (acceptedImageType.indexOf(ext)!=-1) {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#remove_logo").val(0);
                        $(".wk-logo-image-block img").attr("src", e.target.result);
                        error = false;
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            } else {
                alertBox({
                    title: warningLabel,
                    content: "<div>Invlaid image</div>",
                    actions: {
                        always: function (){}
                    }
                });
                currentThis.val('');
            }
        });

        $("body").on("click", ".wk-logo-reset", function () {
            $(".wk-logo-image-block img").attr("src", sellerLogo);
            $("#logo_pic").val("");
        });

        $("body").on("click", ".wk-logo-remove", function () {
            $(".wk-logo-image-block img").attr("src", defaultLogo);
            $("#remove_logo").val(1);
            $("#logo_pic").val("");
        });
    });
</script>

Please check and help me where I am missing anything.

Answer 1

Thanks for everyone who looked into this issue, finally I did myself, This issue was caused on particular block there I found the issue which was causing and did some research and fixed the issue by comparing with other code. I have a similar template page so there I found the solution to fix this. Here is the solution which I. has resolved the issue using this below code.

<script>
            require([
            "jquery", 
            "mage/translate", 
            "mage/adminhtml/events", 
            "mage/adminhtml/wysiwyg/tiny_mce/setup"
            ], function(jQuery){
                wysiwygCompanyDescription = new wysiwygSetup("return_policy", {
                    "width":"100%",
                    "height":"200px",
                    "plugins":[{"name":"image"}],
                    "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
                    }
                });
                wysiwygCompanyDescription.setup("exact");
                wysiwygCompanyDescription = new wysiwygSetup("shipping_policy", {
                    "width":"100%",
                    "height":"200px",
                    "plugins":[{"name":"image"}],
                    "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
                    }
                });
                wysiwygCompanyDescription.setup("exact");
                wysiwygCompanyDescription = new wysiwygSetup("privacy_policy", {
                    "width":"100%",
                    "height":"200px",
                    "plugins":[{"name":"image"}],
                    "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
                    }
                });
                wysiwygCompanyDescription.setup("exact");
            });
        </script>

This issue still exists in the webkul module. Thanks

Answer 2

Add define instead of require,

 <script>
            define([
            "jquery", 
            "mage/translate", 
            "mage/adminhtml/events", 
            "mage/adminhtml/wysiwyg/tiny_mce/setup"
            ], function(jQuery){
                wysiwygCompanyDescription = new wysiwygSetup("company_description", {
                    "width":"100%",
                    "height":"200px",
                    "plugins":[{"name":"image"}],
                    "tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
                    }
                });
                wysiwygCompanyDescription.setup("exact");
            });
        </script>