Using external js libraries - where to configure configJSModules

[Fernando Garcia, geändert vor 7 Jahren.]

I'm trying to use jquery data tables library but I'm not be able to load it successfully.

I read this tutorial: USING EXTERNAL LIBRARIES but I'm stuck in step 3:

Configure your bundle’s build task to run the configJSModules task over the library.

since I'm not sure where and how to configure configJSModules.

This post describe better what configJSModules does but it is configured in the build.gradle and the library I need to load is in the theme and as I understand, themes doesn't have build.gradle...

Also I have tried to load the library like this:

require([
            'path-to-theme/js/datatable/datatables.js'
        ],
        function (dt) {
            console.log('dt', dt);

        },
        function (error){
            'use strict';

            console.log('main require', error);
        }
    );

and I'm getting this warning in browser console:

Mismatched anonymous define() module: function ( $ ) {
return factory( $, window, document );
}

and this error in the console

java.lang.IllegalArgumentException: Path jquery.js does not start with a "/" character
java.lang.IllegalArgumentException: Path jquery.js does not start with a "/" character

.

Also I have tried to do what this post does without success.

I think the problem is I don't know how to tell liferay AMD where is the library.

Any example or guidance would be great.

Thanks

[Chema Balsas, geändert vor 7 Jahren.]

Hey Fernando,

In the case of a jQuery plugin, I guess you'd be better off hiding the loader.

Please, see the note at the end of this tutorial about the expose global setting for more information about it.

Hope that helps.

[Fernando Garcia, geändert vor 7 Jahren.]

Thanks for the answer.

I was confused since jquery datatables support UMD...

[Chema Balsas, geändert vor 7 Jahren.]

Hey Fernando,

Most of jQuery plugins do support UMD. The problem we've seen is that people aren't actually aware of that, and that they expect them to work as global plugins instead... as they used to work. For this reason, we worked on a way to hide the loader since it will cause less disruption to both existing code and mainstream practices.

If you still want to give that a try, you should follow this tutorial

In the case of themes, you need to add the following header in your liferay-plugin-package.properties file

Liferay-JS-Config: /META-INF/resources/config.js

Then, inside the config.js, you can use Liferay.Loader.addModule to configure your plugin path and dependencies.