0

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.

  • Could you share the full error you get in console.. – aravind Oct 10 at 11:55
  • Uncaught ReferenceError: require is not defined at VM45:176 (anonymous) @ VM45:176 VM46:277 Uncaught ReferenceError: require is not defined at VM46:277 (anonymous) @ VM46:277 – Jdprasad V Oct 10 at 12:01
  • the error is in the last added script file? – aravind Oct 10 at 12:02
  • I am getting on 2 scripts first one and last one – Jdprasad V Oct 10 at 12:04
  • 1
    Ok let me check.. – aravind Oct 10 at 12:04
1

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>
  • I will try this and update it here. Thanks – Jdprasad V Oct 10 at 14:07
  • No luck, I am having the same issue if adding define instead of require – Jdprasad V Oct 10 at 14:11
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.