1. Home
  2. Development
  3. RE: Liferay Frontend - npm builder : how to share JS ?

RE: Liferay Frontend - npm builder : how to share JS ?

thumbnail
Eric COQUELIN, modified 6 Years ago.
Liferay Frontend - npm builder : how to share JS ?
Expert Posts: 254 Join Date: 11/3/13 Recent Posts
Dear community,

I wish I could integrate Liferay 7.1 GA2 with Splunk (http://www.splunk.com) using their SDK. Unfortunatelty, due to JS loader introduced since 7.0 and as the proposed JS from Splunk use AMD loader, it brings some conflicts.  I need to package the splunk JS to use it properly in my portlets.

I have been following different tutorial but spent more time on the one share during the last devcon about Angular.

I initialized my liferay-npm-builder and added splunk-sdk as a dependency. As a result, I have:

ecoquelin@kenitra:~/workspaces/splunk/splunk/modules/splunk-shared$ ll
total 300
drwxr-xr-x   8 ecoquelin ecoquelin   4096 janv. 29 22:20 ./
drwxr-xr-x   7 ecoquelin ecoquelin   4096 janv. 29 21:18 ../
drwxr-xr-x   2 ecoquelin ecoquelin   4096 janv. 29 21:18 assets/
-rw-r--r--   1 ecoquelin ecoquelin     24 janv. 29 21:18 .babelrc
drwxr-xr-x   3 ecoquelin ecoquelin   4096 janv. 29 22:05 build/
drwxr-xr-x   2 ecoquelin ecoquelin   4096 janv. 29 21:27 dist/
drwxr-xr-x   3 ecoquelin ecoquelin   4096 janv. 29 21:18 features/
-rw-r--r--   1 ecoquelin ecoquelin     61 janv. 29 21:18 .gitignore
-rw-r--r--   1 ecoquelin ecoquelin  58112 janv. 29 22:20 liferay-npm-bundler-report.html
drwxr-xr-x 381 ecoquelin ecoquelin  20480 janv. 29 21:19 node_modules/
-rw-r--r--   1 ecoquelin ecoquelin     73 janv. 29 21:18 .npmbuildrc
-rw-r--r--   1 ecoquelin ecoquelin    230 janv. 29 22:20 .npmbundlerrc
-rw-r--r--   1 ecoquelin ecoquelin    502 janv. 29 21:19 package.json
-rw-r--r--   1 ecoquelin ecoquelin 169408 janv. 29 21:19 package-lock.json
-rw-r--r--   1 ecoquelin ecoquelin     30 janv. 29 21:18 README.md
drwxr-xr-x   2 ecoquelin ecoquelin   4096 janv. 29 21:21 src/


My package.json
{
    "name": "splunk-shared",
    "version": "1.0.0",
    "description": "Splunk Shared",
    "devDependencies": {
        "liferay-npm-bundler": "^2.6.1",
        "liferay-npm-build-support": "^2.6.1",
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0"
    },
    "dependencies": {
        "splunk-sdk": "^1.8.4"
    },
    "scripts": {
        "build": "babel --source-maps -d build src && npm run copy-assets && liferay-npm-bundler",
        "copy-assets": "lnbs-copy-assets",
        "deploy": "npm run build && lnbs-deploy"
    },
    "main": "index.js"
}

my .npmbundlerrc
{
    "create-jar": {
        "output-dir": "dist",
        "features": {
            "js-extender": false,
            "web-context": "/splunk-shared",
            "localization": "features/localization/Language"
        }
    },
    "dump-report": true,
    "process-serially": true

}

The above configuration is provided by default using 

yo liferay-bundle

And I selected "shared packages bundle"

Now, I deploy successfully this package to Liferay

npm run deploy

And it looks like the OSGI module starts properly but I haven't found any way to check if my JS bundle is available somewhere...

Then, from another portlet, I try to refer to this new bundle in a JSP page

<aui:script require="splunk-shared">

/* Liferay.Loader.require('splunk-shared', function(splunkjs) {
    console.log(splunkjs);
}, function(error) {
    console.error(error);
});
 */
</aui:script>

As you may notice, I try both ways and in any cases it says that this bundle doesn't exist. I don't know which syntax to follow and don't know where to find the list of bundles available.

I want to point to the splunk.js file available in the splunk-shared module folder
modules/splunk-shared/node_modules/splunk-sdk/client/splunk.js

How should I proceed ?

Thank you in advance for your help,
thumbnail
Eric COQUELIN, modified 6 Years ago.
RE: Liferay Frontend - npm builder : how to share JS ?
Expert Posts: 254 Join Date: 11/3/13 Recent Posts
I have been through another test using following syntax

<aui:script require="splunk-shared@1.0.0">

console.log("splunkjs=" +splunkjs);

</aui:script>

I don't get anymore the problem saying that it doesn't know what splunk-shared is and have a bootstrap message I put in my index.js. But the console.log(...) is not displayed. I get the following error in the browser

Erreur dans les liens source : request failed with status 404 URL de la ressource : http://localhost:8080/combo/?browserId=firefox&amp;minifierType=&amp;languageId=en_US&amp;b=7101&amp;t=1548795097782&amp;/o/js/resolved-module/frontend-js-metal-web@2.0.4/bridge/metal-dom/src/all/dom.js&amp;/o/js/resolved-module/frontend-js-metal-web@2.0.4/bridge/metal-uri/src/Uri.js&amp;/o/js/resolved-module/frontend-js-metal-web$metal-position@2.1.1/lib/Geometry.js&amp;/o/js/resolved-module/frontend-js-metal-web$metal-position@2.1.1/lib/Position.js&amp;/o/js/resolved-module/frontend-js-metal-web$metal-position@2.1.1/lib/Align.js&amp;/o/js/resolved-module/frontend-js-metal-web$metal-position@2.1.1/lib/all/position.js&amp;/o/js/resolved-module/frontend-taglib-clay$clay-tooltip@2.3.4/lib/ClayTooltip.soy.js&amp;/o/js/resolved-module/frontend-taglib-clay$clay-tooltip@2.3.4/lib/ClayTooltip.js&amp;/o/js/resolved-module/frontend-taglib-clay@1.2.4/bridge/clay-tooltip/src/ClayTooltip.js&amp;/o/js/resolved-module/splunk-shared@1.0.0/index.js URL du lien source : index.js.map

It looks like it looks for the index.js.map but when I check the build/index.js (autogenerated from my index.js), I have
Liferay.Loader.define("splunk-shared@1.0.0/index", ['module', 'exports', 'require'], function (module, exports, require) {
  var define = undefined;
  console.log("bootstrapped splunk-shared");
  //# sourceMappingURL=index.js.map
});
//# sourceMappingURL=index.js.map

So it looks the map file is commented.
thumbnail
Eric COQUELIN, modified 6 Years ago.
RE: Liferay Frontend - npm builder : how to share JS ?
Expert Posts: 254 Join Date: 11/3/13 Recent Posts
The last but probably not the very last, when using

<aui:script require="splunk-shared$splunk-sdk@1.8.4">
console.log("splunkjs=" +splunkjs);
</aui:script>

It looks it goes in the right direction but my browser shows the following messages

Error: "Error processing module: splunk-shared$readable-stream@2.0.6/lib/_stream_duplex. The provided configuration is not Directed Acyclic Graph."

AND the same as before

Erreur dans les liens source : request failed with status 404 URL de la ressource : http://localhost:8080/combo?browserId=firefox&amp;minifierType=js&amp;languageId=en_US&amp;b=7101&amp;t=1548795097782&amp;/o/frontend-js-web/jquery/jquery.js&amp;/o/frontend-js-web/clay/popper.js&amp;/o/frontend-js-web/clay/bootstrap.js&amp;/o/frontend-js-web/loader/config.js&amp;/o/frontend-js-web/loader/loader.js&amp;/o/frontend-js-web/lodash/lodash.js&amp;/o/frontend-js-web/aui/aui/aui.js&amp;/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&amp;/o/frontend-js-web/liferay/browser_selectors.js&amp;/o/frontend-js-web/liferay/modules.js&amp;/o/frontend-js-web/liferay/aui_sandbox.js&amp;/o/frontend-js-web/clay/collapsible-search.js&amp;/o/frontend-js-web/clay/side-navigation.js&amp;/o/frontend-js-web/jquery/fm.js&amp;/o/frontend-js-web/jquery/form.js&amp;/o/frontend-js-web/lodash/util.js&amp;/o/frontend-js-web/misc/svg4everybody.js&amp;/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&amp;/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&amp;/o/frontend-js-web/aui/arraylist/arraylist.js&amp;/o/frontend-js-web/aui/array-extras/array-extras.js&amp;/o/frontend-js-web/aui/array-invoke/array-invoke.js&amp;/o/frontend-js-web/aui/attribute-base/attribute-base.js&amp;/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&amp;/o/frontend-js-web/aui/attribute-core/attribute-core.js&amp;/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&amp;/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&amp;/o/frontend-js-web/aui/base-base/base-base.js&amp;/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&amp;/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&amp;/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&amp;/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&amp;/o/frontend-js-web/aui/dom-base/dom-base.js&amp;/o/frontend-js-web/aui/dom-core/dom-core.js&amp;/o/frontend-js-web/aui/dom-screen/dom-screen.js&amp;/o/frontend-js-web/aui/dom-style/dom-style.js&amp;/o/frontend-js-web/aui/event-base/event-base.js&amp;/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&amp;/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&amp;/o/frontend-js-web/aui/event-delegate/event-delegate.js URL du lien source : loader.js.map
thumbnail
Ivan Zaera, modified 6 Years ago.
RE: Liferay Frontend - npm builder : how to share JS ?
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
Hi Eric:

As you have guessed, the proper require syntax is "splunk-shared$splunk-sdk@1.8.4". That is because your shared bundle is called "splunk-shared" and that namespaces "splunk-sdk" with the "splunk-shared$" prefix. You can find more about namespacing here:


Regarding the source map, it is not commented, that's the standard syntax:


And, to finish with, the "The provided configuration is not Directed Acyclic Graph" message means that you have circular dependencies in your setup which is a bad thing because we don't support it yet :-(. There are some workarounds with webpack and an issue to centralize all the information regarding that feature:


Hope this helps.