AEMaaCS - clientlib upgrade to ESM

[sachinlala]

Team - we are in the process of migration from CommonJS to ESM module packaging/bundling but facing an issue in the clientlib generation.

Steps completed so far:

1. all the required changes in the respective js/jsx/ts/tsx files are complete, with regards to ensuring the import statements contain the file extensions

2. the required updates in package.json, main.js and corresponding code-linting scripts (e.g. eslinter) have been completed

3. we have storybook w/in the ui.frontend module - that's also working good (currently with webpack; gradually we plan to upgrade to vite)

But while doing the build (which also includes bundling and copying the artifacts from ui.frontend to ui.apps), we are getting the following error:

2024-07-31 18:15:09: webpack 5.93.0 compiled with 6 warnings in 30034 ms
<project-root>/ui.frontend/node_modules/aem-clientlib-generator/bin/clientlib-cli.js:44
var clientLibConf = require(configPath);
^

Error [ERR_REQUIRE_ESM]: require() of ES Module<project-root>/ui.frontend/clientlib.config.js from<project-root>/ui.frontend/node_modules/aem-clientlib-generator/bin/clientlib-cli.js not supported.
Instead change the require of clientlib.config.js in<project-root>/ui.frontend/node_modules/aem-clientlib-generator/bin/clientlib-cli.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (<project-root>/ui.frontend/node_modules/aem-clientlib-generator/bin/clientlib-cli.js:44:21) {
code: 'ERR_REQUIRE_ESM'
}

As you can see, this is coming from clientlib-cli.js file, which is part of the aem-clientlib-generator npm package. We have made the required enhancements in clientlib.config.js to adapting to ESM semantics, but can't override the `require` type imports in the underlying clientlib-cli.js file. I am thinking we create an equivalent file in the main repo and do the ESM changes there but before going into that direction, would like to check with the community if there is a better way. If there is a variation of aem-clientlib-generator that is ESM compliant, that would be best.

Appreciate the help.

Regards.

Sachin

[sachinlala]

This turned out to be simple aspect of interoperability between CommonJS & ESM - because the plugin is by default in CommonJS, we renamed the clientlib.config.js to clientlib.config.cjs and specifically mentioned the config file name in the clientlib command i.e. 

"scripts" {
"clientlib:publish": "clientlib clientlib.config.cjs",
"prod": "npm run build && npm run clientlib:publish"
}

The clientlibs are getting successfully published to ui.apps module.