0

I am developing a custom theme for Magento 2.1.x which should use the LightGallery jQuery plugin. I tried to include the plugin script but I am getting error.

This is my require-config.js placed under the folder app/design/frontend/Vendor/Theme/require-config.js:

var config = {
    "map" : {
        "*" : {
            custom: "js/custom.js",
            lightgallery : "js/lightgallery"
        }
    }
};

the lightgallery.js I downloaded is under the folder app/designfrontend/Vendor/Theme/web/js/lightgallery.js

Then I wrote a custom custom.js:

define([
        'jquery',
        'lightgallery'
    ],
    function($) {
        console.log("Test");
    }
);

and eventually I created a phtml file included in every block which requires the custom.js module in this way:

require(['jquery', 'lorante'], function($)
{
});

Refreshing the page, after having ran the command bin/magento setup:static-content:deploy, throws javascript error:

Uncaught Error: Mismatched anonymous define() module: function (a0) {
  return (factory(a0));
}

What am I doing wrong?

Edit

Taking a look at the lightgallery script I noticed that it is slightly different from other jQuery plugin, such as slick for example which I can include without errors:

this is the lightgallery script:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module unless amdModuleId is set
    define(['jquery'], function (a0) {
      return (factory(a0));
    });
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require('jquery'));
  } else {
    factory(root["jQuery"]);
  }
}(this, function ($) {
...

This is slick:

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...

What are the differences between this two declarations?

  • Thanks, but I could not find any hints on what I am doing wrong. Could you elaborate? – gianis6 Aug 11 '17 at 14:22
  • If I use require instead of define I get it working but only if I remove from require array the lightgallery – gianis6 Aug 11 '17 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.