Liferay NPM Bundler with ReactJS and Clay

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-14T14:57:34Z

Hello Ivan,

that was the key :-)

I was looking into the frontend spa module in the Liferay source for the Version, but it was the wrong one.

It now renders and works, thank you very much.

Best regards,
Rene

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-14T13:44:23Z

What version of frontend-taglib-clay$clay-button and frontend-taglib-clay$clay-badge do you have in your portal?

Can you have a look at http://localhost:8080/o/js_loader_modules and look for it?

It should match the semantic versioning expresion you have in the imports section of your .npmbundlerrc file...

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-13T16:41:08Z

Hello Ivan,

thanks again for your feedback.

I recreated my module from scratch with the Liferay NPM Bundler, now changing the .npmbundlerrc as you suggested.

Now I am able to load my module properly, but now It tells me that the Version of clay which I am referencing is not loaded in the Server:

Liferay AMD Loader: Unhandled failure: Error: The following problems where detected while resolving modules:
Package frontend-taglib-clay$clay-button which is a dependency of planner-test@1.0.0 is not deployed in the server
Package frontend-taglib-clay$clay-badge which is a dependency of planner-test@1.0.0 is not deployed in the server
    at Loader._getResolutionError (combo?browserId=other&amp;minifierType=js&amp;languageId=en_US&amp;b=7110&amp;t=1557762987464&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/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/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&amp;/o/frontend-js-web/aui/event-focus/event-focus.js:17425)

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-13T07:40:07Z

Of course, don't use a version higher than the one the portal is providing, because it won't match unless you change the semantic version expression to somehting less restricting.

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-13T07:37:19Z

That is because clay cannot be loaded more than once because it uses SOY under the hood and SOY uses a global namespace :-(. So, even if you use an AMD loader to attain modularity, there's a bottleneck in SOY library because every AMD module shares the same namespace.

The solution to fix this is importing clay libraries from the portal instead of providing your own. This has some limitations because you cannot control which version of clay gets loaded as you are delegating that decission to the portal itself. However, because we also use clay in the portal, chances are that it is always up to date.

If you want to import clay you need to add the following to your .npmbundlerrc file:

"config": {
&nbsp;&nbsp; &nbsp;"imports": {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"frontend-taglib-clay": {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-alert": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-autocomplete": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-badge": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-button": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-card": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-card-grid": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-checkbox": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-collapse": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-component": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-data-provider": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-dataset-display": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-dropdown": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-icon": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-label": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-link": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-list": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-loading-indicator": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-management-toolbar": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-modal": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-multi-select": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-navigation-bar": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-pagination": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-pagination-bar": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-portal": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-progress-bar": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-radio": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-select": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-sticker": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-table": "&gt;=2.9.0",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"clay-tooltip": "&gt;=2.9.0"
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;}
}

Note that 2.9.0 should be substituted by the version you are using. It will probably make sense to have the same version you are using in package.json with a >= prepended so that if the portal updates clay your module doesn't break.

Currently, portal 7.1 is using these versions of clay -> https://github.com/liferay/liferay-portal/blob/7.1.x/modules/apps/frontend-taglib/frontend-taglib-clay/package.json

Hope this helps.

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-12T17:55:12Z

I changed now the way how I create the app, as described here: https://dev.liferay.com/develop/reference/-/knowledge_base/7-1/the-structure-of-osgi-bundles-containing-npm-packages

Now I get errors, that several Clay elements are already defined:

Uncaught Error: Namespace "ClayIcon.incrementaldom" already declared.

Any further thoughts ?

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-10T15:13:33Z

Hello Ivan,

thanks for your reply :-)

I also discovered that the module thows an exception on deployment:

java.lang.NullPointerException
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.github.yuchi.semver.Version.compareTo(Version.java:158)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.github.yuchi.semver.Version.compareTo(Version.java:5)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.Comparator.lambda$comparing$77a9974f$1(Comparator.java:469)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.Collections$ReverseComparator2.compare(Collections.java:5178)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.TimSort.binarySort(TimSort.java:296)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.TimSort.sort(TimSort.java:239)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.Arrays.sort(Arrays.java:1512)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at java.util.ArrayList.sort(ArrayList.java:1460)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.frontend.js.loader.modules.extender.internal.npm.NPMRegistryImpl._refreshJSModuleCaches(NPMRegistryImpl.java:341)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.frontend.js.loader.modules.extender.internal.npm.NPMRegistryImpl._processBundle(NPMRegistryImpl.java:279)

For some reason one of the js packages inside of my module has a empty version number.

Strangely this module seems to contain my index.js (which is the main entrance point of my application), but without the version of my module.

RE: Liferay NPM Bundler with ReactJS and Clay

2019-05-10T10:54:12Z

Looks like there's an issue with your "com.liferay.frontend.js.spa.web" bundle because, looking at the stack trace, this call is failing because this code is throwing a NPE.

That is probably caused by the NPMRegistry not knowing anything about the frontend-js-spa-web bundle.

Said that, I have no idea of what could be causing this. There may be a variety of reasons.

Have you had a look at http://localhost:8080/o/js_loader_modules ? Maybe you can see there if there's something wrong with frontend-js-spa-web...

Liferay NPM Bundler with ReactJS and Clay

2019-05-10T08:05:31Z

Hello Community,

I like to use the Liferay NPM Bundler with the Clay web components to make use of the prebuild components in Clay as well as ReactJS for fast dom traversal and loading, as described here: https://github.com/liferay/clay/tree/2.x/examples/react-with-clay

If I start my React app standalone 'npm run start' the clay components are visible and actionable.

The Versions of the components I am using are:

Liferay 7.1
Clay 2.14.2
React 16.3.2
NPM Bundler 2.6.2

If I run 'npm deploy' to bundle an OSGI bundle and deploy it to Liferay, I get two errors:

Bowser JS Console: see attached file "Error-JS-Console.png"

In the Liferay logs I am seeing a corresponding errors of the NPMPackageResolver:

07:58:29,797 ERROR [http-nio-8080-exec-5][DynamicIncludeUtil:79] java.lang.NullPointerException
java.lang.NullPointerException
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.frontend.js.loader.modules.extender.internal.npm.NPMResolverImpl.resolveModuleName(NPMResolverImpl.java:83)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.frontend.js.spa.web.internal.servlet.taglib.SPATopHeadJSPDynamicInclude.include(SPATopHeadJSPDynamicInclude.java:103)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.portal.kernel.servlet.taglib.DynamicIncludeUtil.include(DynamicIncludeUtil.java:76)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.taglib.util.DynamicIncludeTag.doEndTag(DynamicIncludeTag.java:32)
...
07:58:31,431 ERROR [http-nio-8080-exec-1][ComboServlet:90] java.lang.IllegalArgumentException: Path [metal-dom/src/all/dom.js] does not start with a "/" character
java.lang.IllegalArgumentException: Path [metal-dom/src/all/dom.js] does not start with a "/" character
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at org.apache.catalina.core.ApplicationContext.getRequestDispatcher(ApplicationContext.java:404)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at org.apache.catalina.core.ApplicationContextFacade.getRequestDispatcher(ApplicationContextFacade.java:222)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; at com.liferay.portal.servlet.ComboServlet.getResourceRequestDispatcher(ComboServlet.java:429)
...

Has any one a hint on how to investigate this error further ?

Thank you,
Rene