Magento2: TypeError: $.widget is not a function ( minicart , layered navigation not render )

[parthviroja]

Many time when i open my project frontend site, minicart not render..

And sawing this error..

file location -> ../pub/static/frontend/Magento//en_US/mage/dataPost.js

[ishakhsuvarov]

@parthviroja Thank you for reporting. Could you please provide more clear preconditions and steps to reproduce the issue?

[parthviroja]

I have install ( Magento CE 2.0.0 with sample data ) on local server ( 192.168.0.100/magento-demo ).

When i open Frontend in browser, mincart item counter not display,

when i check in error console in ( Firefox ) its display error message

If any possibility to fix this issue without update magento version ?, and give me suggestion to solve this issue i will try to fix this.

[shuaiZend]

I often get this error here。
v 2.0.4
can't get products images in frontend product pages.

[luongngoctien]

Hi Guys
Any update here, I upgrade to version 2.0.6 but still have this error

[shuaiZend]

@luongngoctien
set "Merge JavaScript Files" to Yes.
try it.

[luongngoctien]

@shuaiZend it's not the solution.

[soncp]

Hello?

Do you have any solution? How to fix that error?

[ishakhsuvarov]

We could not reproduce the issue with the stock installation from the 2.0 branch. Do you have any themes/extensions which could influence this? Any specific settings etc? Have you tried with the clean Magento installation?
Reopening for further investigation.

[shuaiZend]

@ishakhsuvarov Javascript Error loading sequence caused by inconsistent.

[ahofstetter]

I get this error as well

[Shelest]

+1 even in 2.0.7

[devDomM]

@ishakhsuvarov get the same error, but we noticed it only seems to occur when using Google Chrome.

[davidnguyen2205]

me too ...
Magento 2.0.6

[SilvanLaroo]

+1 on 2.0.7. Sometimes the page loads fine without any errors, but most of the time the error is thrown and no product image is visible on the productpage.

I do have additional errors, not only the one from dataPost.js.

[Windmagez]

I have the same error i have opened the datapost.js on dev tool and this is the content

define([
    "jquery",
    "mage/template",
    "jquery/ui"
], function($,mageTemplate){

    $.widget('mage.dataPost', { //ERROR is pointing to this .WIDGET Function
        options: {

The error simple means that the Function definition of $.widget function cannot be found. And i don't have any idea where to find such missing resource.

Preconditions:
1.I included bootstrap css and js files on my default_head_blocks.xml

1. A theme that i am customizing is using uses owl.carousel (if this is significant)

[giacmir]

We had this too while developing a custom theme,
the problem is that if you add javascripts directly to default_head_blocks.xml instead of using requirejs-config you will be likely subject to this kind of issues.

E.g if you add jquery via xml you cannot tell if the jquery used is the requirejs provided one or the xml one, and the two jqueries are not the same in terms of included plugins and extensions.

Always use requirejs to add javascript to your theme.

[Onkovat]

The problem probably is that jQuery runs in 'no-conflicts' mode to reduce the likelihood of it conflicting with other third party libraries. The $ in $.widget would need to be replaced with jQuery everywhere you use jQuery. I think mage 2 devs did not think about that possibility so they did use $...

[Onkovat]

Since this seems to be a problem with magento 2 itself I tried the workaround to use requirejs. But I face some issues. The js seems to be drawn but I get errors in the console, you can see them at the bottom of my post.
Can you help me identifying the problem with my setup? Probably will help others too since it looks like requirejs is rarely used yet even by experienced mage2 devs. See my thread here:

http://magento.stackexchange.com/questions/126186/magento-2-0-7-change-js-includes-from-default-head-blocks-phtml-to-require-js

Thanks alot!

[giacmir]

@Onkovat Please note that using requirejs is not a workarond, is the way magento 2 is meant to work.

[troublediehard]

@giacmir thanks. I've fixed my issue with removing js from default_head_blocks.xml and using requirejs.

[Onkovat]

@giacmir That's correct but I asked alot of experienced mage 2 devs plus the thread at stackexchange and no one could help me. Do you see where the error might be or does the code look correct to you?

I had read in sourcecode that my config was implemented in requirejs-config.js and there was require.config(config); })(); (function() { .... and .... require.config(config); })(); put around it automatically. I thought that's what was needed only or do I have to edit the original js-files on top?

But it seems it is asking for js-files that mage2 should have built out of the original ones. But mage2 can't find them in pub/static. Not sure what's wrong.

It seems even out of the experienced mage 2 devs only a few have used requirejs at all yet.

[Onkovat]

I found that it might be the easiest way to use the jquery magento is coming with.

No import of your own jquery or jqueryui anymore and every file that depends on jquery needs these tages around the code:

require(['jquery', 'jquery/ui'], function($){
....
});

I think with that setup one does not need to replace $ in the code with jQuery anymore too.

That's all...

It works for direct inclusion via header or via requirejs. Though the latter I do not like yet very much because of their caching of the scripts. Normal behaviour is to deliver old scripts.

Even when disabling cache in chrome dev tools... the scripts work but not fully. For example my owl carousel works but it does not autostart. I have to click to move it into one direction first. Then it moves correctly automatically on autoplay. Well... requirejs was not able to befriend me. It brings a whole new bunch of unneeded problems. :P

[typify]

I came across the same error which also blocked further processing of javascript. The suggestions above did not work. I already use requirejs to load my custom JS for example.

I finally found out that Magento is shipping with jQuery UI 1.10. Unfortunately, jQuery UI supports AMD loading (requirejs) since version 1.11. I just replaced the UI version shipped with Magento with a 1.11 version and everything works fine. I have not updated Magento to the latest version yet (running 2.0.6).

[magentodevleper]

i have modify as per @typify suggestion , its working fine. but all Modal popup will not display in Magento 2.1.0 after update jquery-ui.1.9.4 -> jquery-ui.1.11.* / 1.12.*

when use jquery-ui.1.12.0

1 : modal not display when remove item from minicart.
2 : checkout summary aside modal in mobile view.

[sjovanig]

Magento 2.1.0 and same issue buy only in developer mode.

[GlobalOutsourcing]

I am experiencing the same issue in developer mode and no idea how to fix it.

Anyone have a solution for this please?

[brendanmckeown]

I'm seeing this same error after upgrading from 2.0.7 to 2.1.1 in developer mode – but only on the first page load of a specific layout after clearing all static assets in the pub/static directory. Subsequent loads of the same layout in the same browser or another one will not see the error. I am using a custom theme, but not loading any other copies of jQuery through XML – I am loading jQuery through RequireJS when I need it. I have tried switching back to Luma, and the problem persists there as well.

[ghost]

Yes, this is a very unfortunate mistake.
It looks like it arises only with third-party modules. Although scripts are connected by the reactjs rules - still arise jquery plugins conflicts.

Half day I am trying to fix it and that's what remarked:
1) I set a breakpoint in the line where there is non-existent plugin error. After reviewing the variables I am convinced that in this context, this plugin does not really exist at the inner object $ (jQuery). But when at the same moment a breakpoint I open the console and check this plugin out there - it is there!
2) In the developer mode on the frontend, this error does not occur immediately, but after the page is reloaded several times. After that, you need to reset the entire cache, and then it disappears. But it is worth again reload the page and it comes back.

In my opinion everything related with jQuery in Magento still remains a sore point. For example - still have the ability to connect many jquery library files on one page. This is also the source of many problems. I think you just need to add the software verification of js files to avoid include additional copies of jquery library on page.

[visualnaut]

I've got this issue too on Magento 2.1.2 using SM Market theme.
Apparently the issue is showed when on slow internet, I try to throttle the connection using chrome dev tools to Regular 3G with cache disabled and this error always showed up.

And I tried to console.log the jQuery UI on dataPost.js

Here's the result when I don't use the throttle.

And here's when I turn on the network throttle to Regular 3G with cache disabled

[peexl-dev]

got this on 2.1.3 with infortis ultimo theme

[anujeetphj]

Does anyone got solution for this?

How to include bootstrap.js in require-config instead of default-head-blocks.xml

[pwastack]

It beacause duplicated jQuery load in porto. I got the same problem when try to install Porto theme to Magento2. See more detail at http://magento2developer.com/blog/javascript-error-with-magento-porto-theme.html to fix the bug. It's will help you to solve this problem with other conflict Javascript bug in Magento 2 in the future. A lot of developer not write javascript in Magento 2 standard

[shuaiZend]

M2.1.6 +1

[michel334]

this issue is killing magento :)

[rakesh-gangani]

I was able to fix this issue with

var config = { map: { '*': { 'jquery/ui': 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', } } };

I am not getting any $.widget function error. But its causing issue with other libraries.

[michel334]

@ rsquarem: thanks for your reply. In which file would i need to make these changes?

@Magento closed this issue so according to them the problem is not there anymore. Maybe solved in future imaginary release?

[rakesh-gangani]

@michel334 You can add it to any of your custom module or prepare one for same.

[michel334]

@ rsquarem: thanks im crying right now, its not a pretty sight

[akshgods]

some time this error comes some time not. what to do? any help

Uncaught TypeError: $.widget is not a function
    at /pub/static/frontend/Venustheme/fasony/en_US/mage/dataPost.js:13
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)
    at require.js:132
    at require.js:1156
    at each (require.js:57)
    at Module.emit (require.js:1155)
    at Module.check (require.js:917)
    at Module.enable (require.js:1143)

[zmarwa]

@akshgods did you found any solution please, i have same error with venus theme.

[arthanis]

I tried to add a shim in my theme's requirejs-config.js:

var config = {
  shim : {
    'mage/dataPost': {
      'deps' : ['jquery']
    }
  },
};

[portchris]

For anyone else still experiencing this issue.

I believe this is strictly a theme issue, not a problem with a vanilla install of Magento 2.

The problem

I have seen this issue when:

• jQuery is loaded twice
• Custom theme JS files are calling "$" without defining it

Reproducing the error

I have experienced this problem intermittently but I believe it can be replicated by throttling your connection. Firefox allows you to do this.

Fixes

The fix is rather individual. You have to search your theme's files.
If jQuery is loading twice:
Search layout files for any mention of:

<script src="jquery.js">
<script src="/scripts/jquery-ui-1.11.1.js">

Or similar.

JS files are calling "$" without defining it
Search your custom require JS files for "$" ensure they follow the following template:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Your custom code here...
});