Using external JavaScripts

[Marco Fargetta, modificado 7 Anos atrás.]

Hi everyone,

for a project I need to manage a dynamic table populated using AJAX and I would use the datatable jquery plugin.
I am using Liferay 7 so I would exploit the new support for ES2015 and load it as an external javascript.

I have followed the following video

https://www.youtube.com/watch?v=m276q_7itYU

I have done the requested changes, e.g. using package.json and not bower.json and so on.

The javascript I am writing in my *.es.js work as advertised but I cannot make the imported module
work properly.

I get the error that the javascript files imported in my script cannot be found.
If I try to manually copy a file in the correct directory I get the following error:

> Building 46% > :modules:future-gateway-admin-portlet:transpileJSRunning 'build'...
Compiling soy
Finished compiling soy
Building to format: amd
stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

TypeError: /home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/build/resources/main/META-INF/resources/jquery.dataTables.js: Property consequent of ConditionalExpression expected node to be of a type ["Expression"] but instead got null
    at Object.validate (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-types/lib/definitions/index.js:100:13)
    at Object.validate (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-types/lib/index.js:256:9)
    at NodePath._replaceWith (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/replacement.js:193:7)
    at NodePath._remove (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/removal.js:43:10)
    at NodePath.remove (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/removal.js:25:8)
    at PluginPass.CallExpression (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-plugin-transform-es2015-modules-amd/lib/index.js:51:12)
    at NodePath._call (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/context.js:63:18)
    at NodePath.call (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/context.js:47:17)
    at NodePath.visit (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/path/context.js:93:12)
    at TraversalContext.visitQueue (/home/marco/Projects/Liferay/7.0/projects/fgAdmin/modules/future-gateway-admin-portlet/node_modules/metal-cli/node_modules/babel-traverse/lib/context.js:152:16)
:modules:future-gateway-admin-portlet:transpileJS FAILED

FAILURE: Build failed with an exception.

Is there an example of portlet loading an external library properly?

I am attaching my module in case someone can give some hint to solve the problem.

Cheers,
Marco

[Chema Balsas, modificado 7 Anos atrás.]

Hi Marco,

Is the library you're trying to load ./datatables.net? Where does this library live? How does it look? Also, what are you using to build it?

Most likely, the "error" you see on the build phase if the file is not there is just a warning. The one you see if you add it might mean that it has indeed some syntax error or some other issue picked up by the compiler.

Could you please some more details about the setup and what you're trying to achieve?

Also, you could get some additional info in https://web.liferay.com/es/community/forums/-/message_boards/message/76720204

Thanks!

[Marco Fargetta, modificado 7 Anos atrás.]

Hi Chema,

the library I would use is https://datatables.net/download/bower.

The library is AMD compliant and I would use it to populate a table using ajax. When I add the library as dependency in my
package.json it is downloaded in my `node_modules` folder. I have tried also to use bower inside the module to install the library.

Following the video I linked it seems that if I add it as a dependency and install with bower then I can use it inside my javascript module
but it does not work. I get the error saying that the file is not there. Where/how should I configure to recognise additional javascript modules?

Additionally, If I manually copy the file to the location where it is loaded I get the error I posted in my original comment but I think the file should be correct. How can I verify?

Cheers,
Marco

[Julien Pierre Joseph Castelain, modificado 7 Anos atrás.]

Hi Marco,

The reason why you get the first error is because in your ES6 code, you are trying to import a file that is not present:

In the 'fgTable.es.js' file, on line 3, the following code:

 import datatables from "./datatables.net"

fails, because there is no file called "datatables.net" in the same directory as the fgTable.es.js file.

The datatable.net module is an anonymous module, which is often the case with jQuery plugins, and it is not possible to load anonymous modules via combo URL.

We are working on hiding the Loader and our advice is to wait for this change to be merged, and load the jQuery plugins via script tags.

Regards
Julien

[Marco Fargetta, modificado 7 Anos atrás.]

Thanks Julien,
I will try with script tags for now.