AEM Maven Project Build Failing in ui.frontend due to ERR_REQUIRE_ESM and Engine Warnings (Node Version Conflicts)

[SaiSu5]

Hi Adobe Experts,

I’m trying to build an AEM project (using the latest SDK author-2024.11.18751) and the build keeps failing at the ui.frontend module.

Initially, I faced the error:

vbnet

Copy code

Error [ERR_REQUIRE_ESM]: require() of ES Module ...vargs/index.mjs is not supported.

I followed previous suggestions to:

• Downgrade vargs to 0.1.0

• Delete node_modules and reinstall

• Try with Node.js 16.x and 18.x

• Modify my package.json accordingly

After these steps, the ERR_REQUIRE_ESM error persists intermittently, and now I also get warnings like:

css

Copy code

npm WARN EBADENGINE Unsupported engine { package: '@isaacs/balanced-match@4.0.1', required: { node: '20 || >=22' }, current: { node: 'v16.17.0', npm: '8.15.0' } }

Additionally, Maven reports:

nginx

Copy code

Profile "autoInstallSinglePackage" could not be activated because it does not exist.

Environment:

• OS: Windows 11 Home Single Language (24H2)

• AEM SDK: 2024.11.18751

• Node.js Versions Tried: 16.17.0 and 18.20.4

• npm: 8.15.0

• Maven: 3.9.x

• Frontend Build Tool: Webpack 5.x

---

What I’ve Tried:

1. Downgraded vargs to 0.1.0 in package.json

2. Cleaned node_modules, reinstalled with npm install

3. Switched Node.js versions (16 and 18) using NVM

4. Modified clientlib-cli.js to use dynamic import for vargs

5. Tried Maven commands:

   • mvn clean install

   • mvn clean install -PautoInstallPackage

Despite all this, the build still fails at the ui.frontend step.

---

Error Screenshot:

(Attach your latest screenshot showing the error log)

---

Questions for the Community:

1. Which Node.js version is officially supported for AEM Project Archetype 2024.11?

2. Is there a stable combination of vargs, aem-clientlib-generator, and Node.js that avoids this issue?

3. How can I handle the ERR_REQUIRE_ESM in vargs when AEM’s frontend build expects CommonJS?

4. Is there a way to bypass or fix the npm WARN EBADENGINE when using Node 16 or 18?

5. Any official update or patch for ui.frontend to support ES Modules fully?

---

Request:

I am stuck and unable to proceed with creating the project. Any guidance, configuration fixes, or a working setup example would be greatly appreciated!

Thanks in advance,
Sai Sooraj

[MukeshYadav_]

Hi @SaiSu5 ,

You may check if this help https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/facing-build-issues-today-...

However I am able to build on mentioned aem -sdk with below node version and package.json file

{
  "name": "aem-maven-archetype",
  "version": "1.0.0",
  "description": "Generates an AEM Frontend project with Webpack",
  "repository": {
    "type": "git",
    "url": ""
  },
  "private": true,
  "main": "src/main/webpack/site/main.ts",
  "license": "SEE LICENSE IN LICENSE.txt",
  "scripts": {
    "dev": "webpack --env dev --config ./webpack.dev.js && clientlib --verbose",
    "prod": "webpack --config ./webpack.prod.js && clientlib --verbose",
    "start": "webpack-dev-server --open --config ./webpack.dev.js",
    "sync": "aemsync -d -p ../ui.apps/src/main/content",
    "chokidar": "chokidar -c \"clientlib\" ./dist",
    "aemsyncro": "aemsync -w ../ui.apps/src/main/content",
    "watch": "npm-run-all --parallel start chokidar aemsyncro"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.3.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "acorn": "^6.1.0",
    "aem-clientlib-generator": "^1.8.0",
    "aemsync": "^4.0.1",
    "autoprefixer": "^9.2.1",
    "browserslist": "^4.2.1",
    "chokidar-cli": "^3.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^10.1.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "cssnano": "^5.0.12",
    "eslint": "^8.4.1",
    "eslint-webpack-plugin": "^3.1.1",
    "glob-import-loader": "^1.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.2.15",
    "postcss-loader": "^3.0.0",
    "sass": "^1.45.0",
    "sass-loader": "^12.4.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.14.1",
    "terser-webpack-plugin": "^5.2.5",
    "ts-loader": "^9.2.6",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "typescript": "^4.8.2",
    "webpack": "^5.76.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {},
  "browserslist": [
    "last 2 version",
    "> 1%"
  ]
}

and

 <configuration>
            <nodeVersion>v16.17.0</nodeVersion>
          </configuration>

Thanks

[Umesh_Thakur]

try to use 

"aem-clientlib-generator": "1.8.2",

in your package.json for ui-frontend module
hope this helps

Umesh Thakur

[SaiSu5]

Thanks, it's working now ....

[kautuk_sahni]

@SaiSu5 Just checking in — were you able to resolve your issue? We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

[SaiSu5 · Accepted solution]

Thanks, it's working now .

[kautuk_sahni]

@SaiSu5 Glad to hear it worked for you! Could you please share how you resolved it? If it was solved through another user’s comment, kindly mark that as the correct answer.