0

we are using Magento V 2.3.5-p1.

According to the client's requirements, they want to display animation in some of the pages. for that, they gave us .json file for animation. we have used Lottie js to display animation on the website. For that I have uploaded lottie-player.js file in app/design/frontend/{Vendor}/{theme}/web/js directory and included this JS in default_head_blocks.xml file.

After including this JS file I am getting js error in browser's console and this error seems to be in all pages. Because this js error other default scripts are not working sometimes. please refer below screenshot for the error

enter image description here

This error is related to the "define()" function. So, my conclusion is that the "define()" function is already defined in Magento's default jquery. So when the lottie-player.js loads on the website it is conflicting with Magento's default jquery because this file also have it's own "define()" function.

Have anyone used the Lottie animation library in Magento 2? Can anyone give me any suggestions on how can I use Lottie animation js in Magento 2?

  • Have you added the JS via XML by any chance? – Ben Crook Aug 4 at 8:50
  • Yes as I mentioned in my question I have added "lottie-player.js" file via XML(default_head_blocks.xml) file. – R-IphoneDev Aug 4 at 9:17
  • Ah my bad I skim read that and missed it. That is the issue, you need to load this through Require JS. I'll write up an answer now. – Ben Crook Aug 4 at 13:13
0

This is an issue when you load a file that supports Require JS via XML, the fix is to use Require JS to load your script.

  1. Load your own custom JS file using your preferred method (XML, x-magento-init, data-mage-init)
  2. Load Lottie inside this JS file like so:
define([
    "js/lottie-player"
], function (lottie) {
    'use strict';

    console.log(lottie);
});

You can then use lottie in your script, the console log above returns the below in the browser:

enter image description here

| improve this answer | |
  • I have implemented your solution but I have made a small change. I have used "require" instead of "define" in the script which you gave me and now it seems to be working fine and there are no errors in the console. So, Is it ok to use require? – R-IphoneDev Aug 6 at 4:54
  • Yeah you are fine to use require. If this answer has solved the problem for you please mark it as accepted. – Ben Crook Aug 6 at 11:16
  • I marked the answer as accepted. can you please look at my other question as well magento.stackexchange.com/q/319197/90803 – R-IphoneDev Aug 6 at 11:40
  • I don't know the answer to that one sorry :( – Ben Crook Aug 6 at 13:44

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.