LR7 CE GA2: import JavaScript third party lib

[Alessandro Candini, modificado hace 7 años.]

In LR 6.2 I was used to import third party libraries including them in portal_normal.ftl (moment.js is just an example):

<script type="text/javascript" src="${javascript_folder}/moment.js"></script>

And then I were able to use it, for example inside main.js:

AUI().ready(
  function() {
    console.log(moment().format());
  });

But this workflow seems not to work anymore: I get the following error inside browser js console:

Mismatched anonymous define() module: function (a){return b(a)}

Any idea on how to solve this?

Thanks.

[Alessandro Candini, modificado hace 7 años.]

Looking the demo of the Liferay AMD Loader, I've found the following solution:

• I've installed moment.js inside my-theme/src/components folder with bower
• I've created a config.js file iside my-theme/src/js/ folder with the following content:
  

  Loader.addModule({
      dependencies: [],
      anonymous: true,
      name: 'moment',
      path: '/o/my-theme/components/moment/min/moment.min'
  });

• I've imported config.js inside src/templates/portal_normal.ftl:
  

  <script type="text/javascript" src="${javascript_folder}/config.js"></script>

• I've put inside my-theme/src/js/main.js the following:
  

  AUI().ready(
    function() {
  
      require(['moment'], function(moment) {
        console.log(moment().format());
      }, function(error) {
        console.error(error);
      });
  
    });

This way I get the date printed in the JavaScript console and the following warning message:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

So, at least it seems to work...but is this the correct approach?

Any hint, suggestion and help will be really appreciated, thanks!

[Chema Balsas, modificado hace 7 años.]

Hey Alessandro!

Your solution is indeed the right approach. You could make it slightly better by adding the following header to your liferay-plugin-package.properties file:

Liferay-JS-Config=/javascript-folder/config.js

This way, you don't need to touch portal_normal.ftl and you'll avoid that extra request since it will be handled by the infrastructure itself in the initial load of all the bundle configuration files .

In addition, as you saw, this is happening because moment.js is defined as an anonymous module but you were initially loading it statically. Because of this, loader was complaining, but I think your code should still be working. Could you verify this? Also, in GA2 this should actually be throwing a warning and not an error and should be configurable to silently continue if reportMismatchedAnonymouseModules = false.

Hope something can be of use here...

[Trevor Burkholder, modificado hace 7 años.]

Chema Balsas:

Hey Alessandro!

Your solution is indeed the right approach. You could make it slightly better by adding the following header to your liferay-plugin-package.properties file:

Liferay-JS-Config=/javascript-folder/config.js

This way, you don't need to touch portal_normal.ftl and you'll avoid that extra request since it will be handled by the infrastructure itself in the initial load of all the bundle configuration files .

In addition, as you saw, this is happening because moment.js is defined as an anonymous module but you were initially loading it statically. Because of this, loader was complaining, but I think your code should still be working. Could you verify this? Also, in GA2 this should actually be throwing a warning and not an error and should be configurable to silently continue if reportMismatchedAnonymouseModules = false.

Hope something can be of use here...

Chema,

I'm attempting the following and I'm getting this error:

15:59:20,992 ERROR [http-nio-8080-exec-1][status_jsp:950] Path isotope.js does not start with a "/" character

Loader.addModule({
    dependencies: [],
    anonymous: true,
    name: 'isotope',
    path: '/o/dxp-theme/js/lib/isotope.js'
});

Liferay-JS-Config=/src/js/config.js

[Trevor Burkholder, modificado hace 7 años.]

I've gotten around the error by just referencing my config file in portal_normal

<script src="${javascript_folder}/config.js"></script>

However, now I'm running into a bunch of errors when I try to use https://github.com/jquery/jquery-mousewheel

Loader.addModule({
    dependencies: [],
    anonymous: true,
    name: 'mousewheel',
    path: '/o/dxp-theme/js/lib/jquery.mousewheel.min.js'
});

$(function() {
    require(['mousewheel'], function(mousewheel) {

        $.srSmoothscroll({
            step: 150,
            speed: 800
        });

    }, function(error) {
        console.error(error);
    });
});

It would be great to see some complete documentation on this. Especially since the anyonymous module errors prevent code from executing, so any AMD-aware plugins will need to be edited before they can be used in a theme.

[Paul Allain, modificado hace 7 años.]

Use

Liferay-JS-Config=/js/config.js

instead of

Liferay-JS-Config=/src/js/config.js