Magento 2 – Require Js Not a Function Error

magento2requirejsrequirejs-config.js

Firstly, yes I'm in developer mode – and yes i've got the caché turned off and flushing it ( i've also deleted pub/static a fair few times ).

My issue:

I have an extension which adds a page to the admin area of the site on this page Im using require js to call in plugins to do things. Here is my requirejs file:

var config = {
  map: {
    '*': {
        nestable:  'Vender_Default/js/jquery.nestable.min'
    }
  }
};

Which is inside of the following file:

vender/default/view/adminhtml/web/requirejs-config.js

and then in the page I'm doing the following:

require([
        'jquery',
        'nestable'
    ], function($, nestable) {
        $('#nestable').nestable({
                    group: 1,
                    maxDepth: 15
                }).on('change', updateOutput);
        });

Which i thought was correct, however i get the following errors:

Cannot read property 'fn' of undefined at jquery.nestable.min.js:1

and

TypeError: $(…).nestable is not a function

Which clearly its not now, because of the first error. Does anyone have any idea why I am getting this issue? I can't seem to get my head around why its not working. And most other questions on here don't seem to be the same issue.

** Have changed jQuery to $ and still receiving the error.

Thanks

Best Answer

You need to do as below, need to change jQuery to $ as argument,

require([
    'jquery',
    'nestable'
], function($, nestable) {
        $('#nestable').nestable({
            group: 1,
            maxDepth: 15
        }).on('change', updateOutput);
});

Related Solutions

Magento 2 – Fix Script Errors When Running MAGE_MODE=production

Generation of anything on the fly, including static content and classes, is prohibited in production mode. Once you enabled production mode and called setup:static-content:deploy it pre-generated everything needed to render the page. I would also recommend to run setup:di:compile and dev:css:deploy.

Alternatively you can run deploy:mode:set: it enables production mode, regenerates everything needed to be regenerated and changes the permissions on the filesystem. Official documentation is here

RequireJS Shim Option Not Working – Magento 2

You have to set requirejs-config.js like below,

More details, Refer link, How to Resolve RequireJs error in Magento 2

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

Use above code and remove var folder and try. Thanks.

Related Topic