1

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.

Circle B
  • 1,616
  • 3
  • 26
  • 45
  • 2
    Possible duplicate of [Turning off eslint rule for a specific line](http://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line) – Michael May 09 '17 at 19:32
  • @Michael I see why you think it'd be a duplicate, but I really want to know how to make ESLint happy without disabling error reporting. – Circle B May 09 '17 at 19:39
  • I see the difference now--I missed the very last part of your question regarding "without disabling error reporting", so I agree it's not a duplicate – Michael May 09 '17 at 19:57

2 Answers2

6

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,
}
Daniel Del Core
  • 3,071
  • 13
  • 38
  • 52
3

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

qwerty_igor
  • 919
  • 8
  • 14