JS module names are not recursively mapped

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.2.10 DXP FP5, 7.2.10.2 DXP SP2, 7.2.X, 7.3.1 CE GA2, 7.3.2 CE GA3, Master
• Component/s: AMD Module Loader
• Labels:
  • liferay-dxp-72-sp2
  • liferay-fixpack-dxp-5-7210
• Branch Version/s:
  7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 4
• Sprint: S03E18 - Córdoba
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/84232

The NPMRegistry has a mapModuleName() function which is used to convert module names to their real path. For example, if you write:

require("a-package")

It will translate it to something like:

require("a-package/lib/index")

Provided that the main module of "a-package" is defined as "./lib/index".

This has worked without problems for so long, but there's a case where it fails. Say you have "./lib" as the main module of "a-package", and then you have and "index.js" file inside "lib". That should make

require("a-package")

be converted to:

require("a-package/lib/index")

But, because mapModuleName() is not calling itself recursively, it only does one mapping, when two are required: the first one to map "a-package" to "a-package/lib", and the second one to map "a-package/lib" to "a-package/lib/index".

Steps to reproduce:

1) Download or clone the repo at https://github.com/Gympass/poc-liferay-react
2) Run "npm install" in that project
3) Run "npm build" in that project
4) Deploy the JAR file in the "dist" folder of the project
5) Open the site in a browser and add the "gympass" portlet to the home page

Expected results:

1) The portlet is rendered (a button appears)

Actual results:

1) The portlet is not rendered and an error message appears in the JavaScript console saying: Missing dependency '@klabin-sso-security-report$gympass/yoga@1.9.0/cjs' of 'klabin-sso-security-report@1.0.0/lib/index'