drgullin / icheck

Highly customizable checkboxes and radio buttons (jQuery & Zepto)
http://fronteed.com/iCheck
7.39k stars 1.63k forks source link

Cannot read property 'fn' of undefined #309

Closed mark-norgate closed 8 years ago

mark-norgate commented 8 years ago

It seems that when requiring icheck in webpack, the module is unable to find the jQuery window object. I get the following error in my browser:

Uncaught TypeError: Cannot read property 'fn' of undefined

at icheck.js:34:

  $.fn[_iCheck] = function(options, fire) { ... }

I am correctly requiring jQuery in my webpack component. I have tried:

window.jQuery = window.$ = require('jquery');

in my component.ts but the webpack compiler complains about jQuery and $ not being properties of window.

Can someone help?

mark-norgate commented 8 years ago

I have realised this is an issue involving jQuery and not iCheck

senhongo commented 8 years ago

@mark-norgate I'm having the same issue right now. Could you mention how you solved it?

mark-norgate commented 8 years ago

HI there @SenHeng

I did solve it, yes. To be honest I felt a bit dirty using jQuery with Angular 2 but it's a quick dirty fix:

export class SigninComponent implements AfterViewInit {
    @ViewChild('rememberMeElement') rememberMeElement;

    ngAfterViewInit() {
        // nasty legacy stuff
        jQuery(this.rememberMeElement.nativeElement).iCheck({
            checkboxClass: 'icheckbox_minimal-orange',
            radioClass: 'iradio_minimal-orange',
            increaseArea: '20%'
        });    
    }
}

I hope this helps. If you need more help, just shout.

Mark

senhongo commented 8 years ago

@mark-norgate We're on ng1 but I'll give that a try. Thanks!

menzil commented 7 years ago

@mark-norgate hello, you can try this webpack config. new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) and updade npm install --save-dev script-loader

senhongo commented 7 years ago

@MenZil

I tried $: "jquery", jQuery: "jquery" the last time but it didn't work. Seems like the problem was iCheck was being loaded before jQuery. In the end we decided to just stop using iCheck.

menzil commented 7 years ago

@SenHeng jquery loaded it before yet, you can change loaded order. I solived this problem with webpack config like abow . https://stackoverflow.com/questions/37496732/webpack-froala-cannot-read-property-fn-of-undefined-1312/37499571#37499571