Resolve liferay-amd-loader errors for themes with React components

Issue

• liferay-amd-loader errors for themes containing React components can be seen in the browser console:

  • liferay-amd-loader | Errors returned from server for require( ['test-theme/js/controllers/test_controller.es'] ): ["Missing required module 'test-theme/js/controllers/test_controller.es'"]

• Starting from DXP 7.2, addModule was removed from liferay-amd-loader, which prevents JavaScript files within the theme from being processed.

Environment

• DXP 7.2
• DXP 7.3

Resolution

Liferay Support does not recommend or endorse specific third-party products over others. The information provided about products not created by Liferay is for reference purposes only, and any implementation of these principles will be at your team's discretion.

1. Build a shared bundle with the JS Toolkit that holds all JavaScript files associated with the theme.
2. Consume this bundle from the .ftl templates invoking Liferay.Loader.require(), after all JavaScript files are moved from the theme to the generated React Widget, for instance: 

   • Liferay.Loader.require(['my-javascript-project@1.0.0/js/test_controller.es']

3. A React Widget with the Liferay JS toolkit generator will need to be created using the following articles:
   • Liferay React Portlets
   • How to use Shared Library Javascript with React
   • How to use generator liferay js

Additional Information

• Custom portlet on DXP 7.2 triggers error 'TypeError: Liferay.Loader.addModule is not a function'
• Removed Liferay.Loader.addModules from liferay-amd-loader