1. Home
  2. Development
  3. RE: Liferay AMD loader doesn't work with JS fast load

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

thumbnail
Alessandro Candini, modified 8 Years ago.
Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 130 Join Date: 10/17/15 Recent Posts
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&themeId=mytheme_WAR_mytheme&colorSchemeId=01&minifierType=js&minifierBundleId=javascript.everything.files&languageId=it_IT&b=7010&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!
thumbnail
Chema Balsas, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load (Answer)
Regular Member Posts: 127 Join Date: 2/25/13 Recent Posts
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.
thumbnail
Alessandro Candini, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 130 Join Date: 10/17/15 Recent Posts
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!
thumbnail
Alessandro Candini, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 130 Join Date: 10/17/15 Recent Posts
By the way: is there a way to tell Senna.js to mark as data-senna-track="permanent" the module loaded through the Loader?
thumbnail
Chema Balsas, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 127 Join Date: 2/25/13 Recent Posts
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!
thumbnail
Alessandro Candini, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 130 Join Date: 10/17/15 Recent Posts
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!
Ineke Vermeulen, modified 8 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
New Member Post: 1 Join Date: 7/27/16 Recent Posts
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 :-)
thumbnail
Pradeep Jain, modified 7 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
New Member Posts: 4 Join Date: 4/16/14 Recent Posts
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.
julio Marquez, modified 7 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
New Member Posts: 4 Join Date: 12/12/11 Recent Posts

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

thumbnail
Chema Balsas, modified 7 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
Regular Member Posts: 127 Join Date: 2/25/13 Recent Posts

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!

thumbnail
Pradeep Jain, modified 7 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
New Member Posts: 4 Join Date: 4/16/14 Recent Posts

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.

        <script>
            Liferay.Loader.require('owlcarousel', function (moduleName) {
                console.log('loading module')
            });
        </script>
        
After deploying both module (theme and portlet), we are getting this error message in console.

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

Can you suggest what I am doing wrong.

Ahmed Hasnaoui, modified 6 Years ago.
RE: Liferay AMD loader doesn't work with JS fast load
New Member Posts: 3 Join Date: 4/11/19 Recent Posts
<p>we have the same issue, did you find any solution?</p>