React portlet not working with UI-Router or another custom router lib

RE: React portlet not working with UI-Router or another custom router lib

2019-07-17T07:27:20Z

Hi there:
Can you please have a look at this guide and see if it helps -> https://github.com/liferay/liferay-js-toolkit/wiki/How-to-troubleshoot-your-setups ?
It would be great if you can provide feedback not only about the problem, but about the guide itself, so that we can continue enhancing it for the whole community to leverage it. No matter if the guide helps you solve your problem or is worthless at all :-).
Feel free to continue asking here if it doesn't help.
Thanks.

RE: React portlet not working with UI-Router or another custom router lib

2019-06-27T17:42:06Z

The problem with many types of JS portlets is that they assume the address bar is the same as the context root.

If your portlet is on /web/guest/home for example, the browser assumes that your path is /web/guest/home/metal-dom/src/all/dom, etc. But these are not the actual paths to the assets, it would be something like /o/my-react-portlet/metal-dom/src/all/dom.

The context root for the portlet is never going to be the relative one from the address bar. So any usage, any library that assumes the address bar is the context root will always fail and must be avoided.

Absolute paths are the only paths that will work.

React portlet not working with UI-Router or another custom router lib

2019-06-27T09:44:06Z

Hi everybody,
As soon as I add a custom router library, the react portlet stopped working. It gives me this error:
(index):995 Error: Load timeout for modules: metal-dom/src/all/dom,metal-uri/src/Uri,clay-tooltip/src/ClayTooltip,infoserver-react@1.0.0 at combo?browserId=othe…vent-focus.js:17339(anonymous)@(index):995(anonymous)@combo?browserId=othe…vent-focus.js:17239Promise.then (async)require@combo?browserId=othe…vent-focus.js:17221(anonymous)@(index):918- This error appears on the google chrome console.I tried with UI-router and react-router as well, both gives the same error. I tried disabling SPA https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/automatic-single-page-applications#disabling-spa but it did not work either, any ideas? I have been struggling with this for a couples of weeks already and I really need a help with this. I can't continue without solving this issue. I am currently using Liferay 7.1 and react 15.6.2. and the UI-Router library as well, 0.4.0 version. You have the error also attached as an image as well.