Magento2 – dataPost.js Override Error

jquerymagento2requirejs

I creating module for guest wishlist on Magento 2.
There is mage library contains many js files.
One of them is dataPost.js in directory mage.
I need overwrite function postData in it.
This is jQuery Widget.

What I have:

requirejs-config.js

var config = {
  map: {
   '*': {
     'mage/dataPost': '<VENDOR_MODULE>/js/wishlist-data-post'
    }
 }
};

VENDOR_MODULE/js/wishlist-data-post.js

define([
  'jquery',
  'jquery/ui',
  'mage/template',
], function($) {
  'use strict';

  $.widget('custom.dataPost', $.mage.dataPost, {
    postData: function(params) {
      e.preventDefault();
      debugger;
      return this._super();
    }
  });

  return $.custom.dataPost;
});

I get error:

Uncaught TypeError: base is not a constructor

I cannot do it like there because it isn't Magento_UI: Magento2 customer account navigation wishlist Items how to display in phtml

No right answer: https://stackoverflow.com/questions/40713696/not-able-to-override-collapsible-js-in-magento-2

What I doing wrong?

Best Answer

There are 2 options available. I use first, because was simpler and work fine. What was wrong - I used map not mixins so this._super(); don't any parent - we override file than we extend.

Solution - first option

Copy lib/web/mage/dataPost.js to the theme as THEME/web/js/mage/dataPost.js Edit THEME/requirejs-config.js with this:

var config = {
  map: {
   '*': {
     'mage/dataPost': 'js/mage/dataPost'
    }
 }
};

Now body of this file is editable in theme and used in system as default.

IMPORTANT: Remove symlink from pub\static, otherwise you stuck with old file ;( This is why we have many problem because symlinks don't automatically update after are created.

Better options is to use mixins in THEME/requirejs-config.js but for me, and this file, not work correct.

Related Topic