v3.x not able to support 0 or >1 js chunks for Create React App adaptations

[kgkars]

Issue type

• 🤔 Question
• 🐛 Bug report
• 🎁 Feature request
• 🤷‍♀️ Other

Version

• 2️⃣ v2.x
• 3️⃣ v3.x

Description

Desired behavior:
If you bootstrap a React application with the current Create React App version - v5.x - then the liferay build command should be able to support the Webpack configurations native to CRA. With migration from CRA and React Scripts to version 5 (along with bumping Webpack from v4 to v5 under the hood), the basic configurations have changed slightly, and it is now more likely to create builds with 0 to n .chunk.js files in the build process. (You can see others have run into this noted in CRA Issue #11278 and CRA issue #11963, and there have been attempts to fix update, but no successful pull requests yet.

Current behavior:
In the current Liferay JS Tookit v3 build process for projects adapted from Create React App bases, the build script assumes there will always be 1 .chunk.js file inside the /static/js/ directory.

• If there are no .chunk.js files, the build script will fail without finishing.
• If there are more than one .chunk.js files, then the build script will finish, but will only include the first .chunk.js file in the .jar, causing 404 errors when attempting to load the React Application.

Repro instructions (if applicable):
I cannot include my code or package.json, as it is related to an enterprise project, however you can recreate parts of the issues by running the following steps:

1. Bootstrap a CRA app:

npx create-react-app my-reproduction

2. Inside the application, create at least two lazy loaded components, following the example set out in the code splitting guide.
3. Convert the application to a Liferay module.

liferay adapt

4. When you run liferay build or npm run build:liferay, compare the number of files noted in the build.liferay/work/static/js/ directory to those listed in the build.liferay/generated/index.js file and you will notice it is only listing the first .chunk.js file and the main.js file for imports (lines 13-14).

Other information (environment, versions etc):

• react v17.0.2
• typescript v4.6.2
• react-scripts v5.0.0
• @liferay/cli v1.1.0
• @liferay/js-toolkit-core v5.0.0
• @liferay/portal-adapt-base v1.0.1
• @liferay/portal-adapt-create-react-app v1.0.1
• @liferay/portal-base v1.1.1

NOTE: I have tried and tested a fix to this bug locally. It involves changes to two files the @liferay/portal-adapt-base package to allow for 0 to n .chunks packages. I will work on creating a PR for this and reference this Issue #.

[izaera]

Hey @kgkars 👋

Very much appreciated the effort to describe the issue and the PR to fix it 🤗

[izaera]

So, the PR is tested and everything is working. I'll release a new version of portal-adapt-base soon.

[izaera]

Done -> https://github.com/liferay/liferay-frontend-projects/releases/tag/portal-adapt-base%2Fv1.0.3

Please try the new released version. Thx.