Liferay AMD loader doesn't work with JS fast load

RE: Liferay AMD loader doesn't work with JS fast load

2019-06-03T09:23:41Z

<p>we have the same issue, did you find any solution?</p>

RE: Liferay AMD loader doesn't work with JS fast load

2018-09-07T09:05:49Z

Hey Julio, you shouldn't really need this. Please, read the [Using External Libraries](https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-0/using-external-libraries#using-libraries-that-you-host) documentation and try unchecking the expose global option of the Liferay Loader in the Configuration Settings.

Hope that helps!

RE: Liferay AMD loader doesn't work with JS fast load

2018-09-07T08:15:44Z

Hi alessandro, could you please post your config.js and main .js files? I am having the same problem.thanks a lot

RE: Liferay AMD loader doesn't work with JS fast load

2018-06-27T10:38:22Z

Hi Chema

We are using a jquery based third party library for carousel OWL Carousel. We want to load this external javascript plugin as a Liferay Javascript Module. Actually we dont want to load this external javascirpt file on every page so we want to create a module for this external javascript file so we can load this where we want.

We are using this approach.

1. A file created in JS folder in theme. It is config.js

2. Calling add module in this config.js like this way.

       Liferay.Loader.addModule(
           {
               dependencies: [],
               exports: 'owlcarousel',
               name: 'owlcarousel',
               path: MODULE_PATH + '/js/owl.carousel.min.js'
           }
       );

3. Now config.js called in liferay plugin package properties file of theme like this way

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

4. For calling this owl carousel we are using code in a display style JSP file like this way.

Liferay AMD Loader: Unhandled failure: Error: Load timeout for modules: owlcarousel

Can you suggest what I am doing wrong.

RE: Liferay AMD loader doesn't work with JS fast load

2018-04-30T05:41:02Z

Hey Chema

I added Loader.addModule(..) in config.js of theme.


Liferay.Loader.addModule( {
		dependencies: [],
		exports: 'owlcarousel',
		name: 'owlcarousel',
		anonymous: true,
		path: '/o/philadelphia-theme/js/owl.carousel.min.js'
});

And I call this module in a JSP of display style using require.


require(['owlcarousel'], function(owlcarousel) {
   console.log(owlcarousel);
 }, function(error) {
   console.error(error);
});

But still I am getting Load timeout error
Error: Load timeout for modules: owlcarousel

So please suggest what is wrong with this code.

RE: Liferay AMD loader doesn't work with JS fast load

2017-05-04T08:00:18Z

Alessandro, can you please post the main.js and config.js that worked for you? I am getting the same error, so that would really help :-)

RE: Liferay AMD loader doesn't work with JS fast load

2016-11-30T09:59:09Z

You're right again Chema: if I move the Loader.addModule() of require.js inside my config.js, leaving the require of that module inside main.js, It works: I don't know why it didn't worked yesterday, maybe a combination of factors related to the "anonymous" thing.

Regarding the loader feature request, issue opened!

RE: Liferay AMD loader doesn't work with JS fast load

2016-11-30T08:54:40Z

Hey Alessandro, glad it helped!

The config.js approach should work. You should only need to do Loader.addModule(...) in there and defer the actual require to wherever you need it into the code. Can you share something more about the issue you experienced?

About the second question, we don't have that feature right now. The loader simply creates a script element with the module uri. Might be simple enough to either add this to the loader or create some extension point where this could be done. Would you care opening an issue in the loader's GitHub project so we can start a conversation about it?

Thanks!

RE: Liferay AMD loader doesn't work with JS fast load

2016-11-29T14:15:46Z

By the way: is there a way to tell Senna.js to mark as data-senna-track="permanent" the module loaded through the Loader?

RE: Liferay AMD loader doesn't work with JS fast load

2016-11-29T13:24:59Z

Yes, the anonymous trick worked!
Now I load the module this way, inside main.js:

jQuery(document).ready(function(){
  'use strict';

  Loader.addModule({
    name        : 'enquire',
    dependencies: [],
    anonymous   : true,
    path        : 'my-plugins/enquire/dist/enquire.min'
  });

  require(['enquire', 'my-modules/utils'],
    function(enquire, utils) {
      console.log(enquire);
      console.log(utils);
    },
    function(error) {
      console.error(error);
    }
  ); // require()
}); // jQuery(document).ready()

I've tried to load enquire inside config.js, but it doesn't work because the liferay AMD loader itself is loaded after the inclusion of config.js and so the Loader.addModule() API is not available yet...

Thanks a lot!

RE: Liferay AMD loader doesn't work with JS fast load

2016-11-29T10:38:59Z

Hey Alessandro,

You're using an anonymous amd module and trying to load it via comboloader. This is not supported and that's why the loader is complaining. You should be able to do one of two things:

If you're hosting the plugin, modify the define(...) clause to name the module, like define('enquire', ...)
Add the enquire plugin configuration stating that anonymous=true

Also, since you're using the config.js file, it should be easier for you to use the imperative Liferay.Loader.addModule() API.

Please, let me know if some of those help.

Liferay AMD loader doesn't work with JS fast load

2016-11-29T08:58:05Z

I have a Liferay 7 theme which loads 2 AMD modules: an external plugin exposed as AMD module and a custom utils module developed by me.
With the following properties set into LIFERAY_HOME/portal-ext.properties, module loading works as expected:

minifier.enabled=false
theme.css.fast.load=false
theme.css.fast.load.check.request.parameter=true
theme.images.fast.load=false
theme.images.fast.load.check.request.parameter=true
javascript.fast.load=false
javascript.log.enabled=false
layout.template.cache.enabled=false

But my problem comes out when I comment out these properties to get a faster enviroment: module loading does not work anymore, and Chrome Developer Tools gives me the following messages:


Mismatched anonymous define() module: function (){return e[f]=g(h)}
http://localhost:8080/o/frontend-js-web/everything.jsp?browserId=other&amp;themeId=mytheme_WAR_mytheme&amp;colorSchemeId=01&amp;minifierType=js&amp;minifierBundleId=javascript.everything.files&amp;languageId=it_IT&amp;b=7010&amp;t=1479460836041

Error: Load timeout for modules: my-plugins/enquire/dist/enquire.min,my-modules/utils

Am I missing something? Why it does not load my modules like in the developer version?

Below, I'm posting my full configuration and files in order to be as descriptive as possible:

LIFERAY_WORKSPACE/themes/my-theme/src/WEB-INF/liferay-plugin-package.properties:

resources-importer-developer-mode-enabled=true
licenses=LGPL
Liferay-JS-Config=/config/config.js
liferay-versions=7.0.0+
long-description=
module-group-id=liferay
module-incremental-version=1
name=my-theme
Provide-Capability=osgi.webresource;osgi.webresource=my-theme

LIFERAY_WORKSPACE/themes/my-theme/src/config/config.js:

// Custom config variable to store modules and not override __CONFIG__
var __CUSTOM_CONFIG__ = {};

// MODULE_PATH is supplied adding the Provide-Capability
// property inside liferay-plugin-package.properties
__CONFIG__.paths['my-plugins'] = MODULE_PATH + '/components';
__CONFIG__.paths['my-modules'] = MODULE_PATH + '/js/modules';

__CUSTOM_CONFIG__.modules = {
    "my-modules/utils": {
        "dependencies": [],
        "path": "my-modules/utils.js"
    }
};

LIFERAY_WORKSPACE/themes/my-theme/src/js/modules/utils.js:

define('my-modules/utils', [], function() {
  return {
    // my functions...
  };
});

LIFERAY_WORKSPACE/themes/my-theme/src/js/main.js:

jQuery(document).ready(function(){
  'use strict';

  require(['my-plugins/enquire/dist/enquire.min', 'my-modules/utils'],
    function(enquire, utils) {
      console.log(enquire);
      console.log(utils);
    },
    function(error) {
      console.error(error);
    }
  ); // require()
}); // jQuery(document).ready()

Any suggestion will be really appreciated, thanks!