ESLint no-undef - js issue with BigCommerce

Question

I've got this code in a .js file that I'm running through ESLint. But it's throwing an error about this line: iFrameResize({ .

Saying: error 'iFrameResize' is not defined no-undef .

If I define it like this: const iFrameResize()

My code no longer works, how do I make ESLint happy and keep the code working?

export default class Page extends PageManager {

before(next) {
    next();
}

loaded(next) {
    next();
}

after(next) {
    const url = Url.parse(location.href, true);
    const IC_PAGE = '/international-checkout';
    const currentPageUrl = url.pathname;
    if (currentPageUrl.indexOf(IC_PAGE) !== -1 && $('#icForm').length === 1) {
        $(document).ready(() => {
            if ($('#icForm').length === 1) {
                if ($('.GiftStatus') && $('.GiftStatus').val() === '1') {
                    alert('Gift Certificate is not available for international orders. Please remove Gift Certificate from shopping cart before proceeding with International Checkout.');
                    window.parent.location.href = '/cart.php';
                    return false;
                }
                $('.icformfields').each((i, e) => {
                    const currentId = $(e).attr('id');
                    const res = currentId.split('-');
                    const finalId = Number(res[1]) + 1;
                    const finalName = $(e).attr('name') + finalId;
                    $(e.currentTarget).attr('name', finalName);
                });
                document.getElementById('icIframe').src = 'https://www.internationalcheckout.com/cart.php';
                document.getElementById('icForm').submit();
                $('#icIframe').load(() => {
                    $('#icForm').remove();
                    $('#loading').css('display', 'none');
                    $('html, body').animate({
                        scrollTop: $('#icIframe').offset().top,
                    }, 1000);
                    $('#icIframe').fadeIn();
                });
            }
        });
        iFrameResize({
            checkOrigin: false,
            enablePublicMethods: true,
        });
    }
    next();
}

}

I want to know how to satisfy ESLint without disabling error reporting for the particular line.

Answer 1

It's also worth noting that eslint provides multiple ways around this. Please see the eslint docs .

I would recommend adding the following to the top of your file. Use this method to define global dependencies that are only used in a couple of places:

/* global iFrameResize */

You can also provide an array:

/* global iFrameResize, iFrameManage, etc */

If you're using iFrameResize a lot or if you're dependent on something like jQuery, consider defining it as a global in your .eslintrc file.

"globals": {
    "iFrameManage": true,
}

Answer 2

if you are sure that the code is working on iFrameResize() and maybe it's the because of the architecture you've setup with js files you might just want to ignore that error. simplest is

// eslint-disable-line

which disables esilnt for that line.

Since this function definition comes from the library that is probably attaching it to the global scope which is window so calling it from that scope does the trick

window.iFrameResizer()

Now eslint understands that you're calling function that resides at window object, so it doesn't complain