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

  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:

Additional Information

这篇文章有帮助吗?
0 人中有 0 人觉得有帮助