Using Node v20+ for AEM react project

[danchapman]

I am using the latest version of the AEM Project Archetype (v49) for a React SPA site.

I'd like to use the latest version of Node (v22.3.0) or at the very least v20.15.0. However when I update the generated Maven project to either v20 or v22, I get build errors.

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=49\
 -D appTitle="My Site" \
 -D appId="mysite" \
 -D groupId="com.mysite" \
 -D aemVersion=6.5.17 \
 -D frontendModule="react"

In the root pom.xml I update:

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
...
<configuration>
<nodeVersion>v22.3.0</nodeVersion>
<npmVersion>10.8.1</npmVersion>
</configuration>
...
</plugin>

In ui.frontend pox.xml I update:

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
...
<configuration>
<nodeVersion>v22.3.0</nodeVersion>
<npmVersion>10.8.1</npmVersion>
</configuration>
...
</plugin>​

In ui.tests pom.xml, I update:

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
...
<configuration>
<nodeVersion>v22.3.0</nodeVersion>
<npmVersion>10.8.1</npmVersion>
</configuration>
...
</plugin>

Run:

mvn clean install

Error:

[INFO] --- frontend:1.12.0:npm (npm run build) @ mysite.ui.frontend ---
[INFO] Running 'npm run build' in /Users/demo/mysite/ui.frontend
[INFO]
[INFO] > mysite@0.1.0 build
[INFO] > react-scripts build && clientlib --verbose
[INFO]
[INFO] Creating an optimized production build...
[INFO] /Users/demo/mysite/ui.frontend/node_modules/react-scripts/scripts/build.js:19
[INFO]   throw err;
[INFO]   ^
[INFO]
[INFO] Error: error:0308010C:digital envelope routines::unsupported
[INFO]     at new Hash (node:internal/crypto/hash:79:19)
[INFO]     at Object.createHash (node:crypto:139:10)
[INFO]     at module.exports (/Users/demo/mysite/ui.frontend/node_modules/webpack/lib/util/createHash.js:135:53)
[INFO]     at NormalModule._initBuildHash (/Users/demo/mysite/ui.frontend/node_modules/webpack/lib/NormalModule.js:417:16)
[INFO]     at /Users/demo/mysite/ui.frontend/node_modules/webpack/lib/NormalModule.js:452:10
[INFO]     at /Users/demo/mysite/ui.frontend/node_modules/webpack/lib/NormalModule.js:323:13
[INFO]     at /Users/demo/mysite/ui.frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
[INFO]     at /Users/demo/mysite/ui.frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
[INFO]     at context.callback (/Users/demo/mysite/ui.frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
[INFO]     at /Users/demo/mysite/ui.frontend/node_modules/babel-loader/lib/index.js:59:103 {
[INFO]   opensslErrorStack: [
[INFO]     'error:03000086:digital envelope routines::initialization error',
[INFO]     'error:0308010C:digital envelope routines::unsupported'
[INFO]   ],
[INFO]   library: 'digital envelope routines',
[INFO]   reason: 'unsupported',
[INFO]   code: 'ERR_OSSL_EVP_UNSUPPORTED'
[INFO] }
[INFO]
[INFO] Node.js v22.3.0

Does anyone know what else needs to be changed for the project to build?

If I run "npm update" from within the ui.frontend project using node v22, I get the following error:

npm error gyp: Undefined variable standalone_static_library in binding.gyp while trying to load binding.gyp
npm error gyp ERR! configure error
npm error gyp ERR! stack Error: `gyp` failed with exit code: 1
npm error gyp ERR! stack     at ChildProcess.onCpExit (/Users/demo/mysite/ui.frontend/node_modules/node-gyp/lib/configure.js:345:16)
npm error gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm error gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm error gyp ERR! System Darwin 23.4.0
npm error gyp ERR! command "/Users/demo/.nvm/versions/node/v22.3.0/bin/node" "/Users/demo/mysite/ui.frontend/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm error gyp ERR! cwd /Users/demo/mysite/ui.frontend/node_modules/node-sass
npm error gyp ERR! node -v v22.3.0
npm error gyp ERR! node-gyp -v v3.8.0

[EstebanBustamante]

Hi,

There is nothing else to be updated, the problem is the project compatibility with the node version, you could try a couple of things to see if this works:

1. Try to delete npm cache with "npm cache clean --force" then npm install

2. Try to use npm audit fix --force and then npm install

3. I recommend going to this thread and check in other node communities about the issue ,https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesuns... 

Hope this works

[danchapman]

Thanks @EstebanBustamante 

I ran npm audit fix --force using node v20 but still getting this error:

npm error code 1
npm error path /Users/demo/mysite/ui.frontend/node_modules/node-sass
npm error command failed
npm error command sh -c node scripts/build.js
npm error Building: /Users/demo/.nvm/versions/node/v20.14.0/bin/node /Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm error gyp info it worked if it ends with ok
npm error gyp verb cli [
npm error gyp verb cli   '/Users/demo/.nvm/versions/node/v20.14.0/bin/node',
npm error gyp verb cli   '/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js',
npm error gyp verb cli   'rebuild',
npm error gyp verb cli   '--verbose',
npm error gyp verb cli   '--libsass_ext=',
npm error gyp verb cli   '--libsass_cflags=',
npm error gyp verb cli   '--libsass_ldflags=',
npm error gyp verb cli   '--libsass_library='
npm error gyp verb cli ]
npm error gyp info using node-gyp@3.8.0
npm error gyp info using node@20.14.0 | darwin | arm64
npm error gyp verb command rebuild []
npm error gyp verb command clean []
npm error gyp verb clean removing "build" directory
npm error gyp verb command configure []
npm error gyp verb check python checking for Python executable "python2" in the PATH
npm error gyp verb `which` succeeded python2 /Users/demo/.pyenv/shims/python2
npm error gyp verb check python version `/Users/demo/.pyenv/shims/python2 -c "import sys; print "2.7.18
npm error gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm error gyp verb get node dir no --target version specified, falling back to host node version: 20.14.0
npm error gyp verb command install [ '20.14.0' ]
npm error gyp verb install input version string "20.14.0"
npm error gyp verb install installing version: 20.14.0
npm error gyp verb install --ensure was passed, so won't reinstall if already installed
npm error gyp verb install version is already installed, need to check "installVersion"
npm error gyp verb got "installVersion" 9
npm error gyp verb needs "installVersion" 9
npm error gyp verb install version is good
npm error gyp verb get node dir target node version installed: 20.14.0
npm error gyp verb build dir attempting to create "build" dir: /Users/demo/mysite/ui.frontend/node_modules/node-sass/build
npm error gyp verb build dir "build" dir needed to be created? /Users/demo/mysite/ui.frontend/node_modules/node-sass/build
npm error gyp verb build/config.gypi creating config file
npm error gyp verb build/config.gypi writing out config file: /Users/demo/mysite/ui.frontend/node_modules/node-sass/build/config.gypi
npm error gyp verb config.gypi checking for gypi file: /Users/demo/mysite/ui.frontend/node_modules/node-sass/config.gypi
npm error gyp verb common.gypi checking for gypi file: /Users/demo/mysite/ui.frontend/node_modules/node-sass/common.gypi
npm error gyp verb gyp gyp format was not specified; forcing "make"
npm error gyp info spawn /Users/demo/.pyenv/shims/python2
npm error gyp info spawn args [
npm error gyp info spawn args   '/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/gyp/gyp_main.py',
npm error gyp info spawn args   'binding.gyp',
npm error gyp info spawn args   '-f',
npm error gyp info spawn args   'make',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/Users/demo/mysite/ui.frontend/node_modules/node-sass/build/config.gypi',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/addon.gypi',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/Users/demo/.node-gyp/20.14.0/include/node/common.gypi',
npm error gyp info spawn args   '-Dlibrary=shared_library',
npm error gyp info spawn args   '-Dvisibility=default',
npm error gyp info spawn args   '-Dnode_root_dir=/Users/demo/.node-gyp/20.14.0',
npm error gyp info spawn args   '-Dnode_gyp_dir=/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp',
npm error gyp info spawn args   '-Dnode_lib_file=/Users/demo/.node-gyp/20.14.0/<(target_arch)/node.lib',
npm error gyp info spawn args   '-Dmodule_root_dir=/Users/demo/mysite/ui.frontend/node_modules/node-sass',
npm error gyp info spawn args   '-Dnode_engine=v8',
npm error gyp info spawn args   '--depth=.',
npm error gyp info spawn args   '--no-parallel',
npm error gyp info spawn args   '--generator-output',
npm error gyp info spawn args   'build',
npm error gyp info spawn args   '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error gyp: Undefined variable standalone_static_library in binding.gyp while trying to load binding.gyp
npm error gyp ERR! configure error
npm error gyp ERR! stack Error: `gyp` failed with exit code: 1
npm error gyp ERR! stack     at ChildProcess.onCpExit (/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/lib/configure.js:345:16)
npm error gyp ERR! stack     at ChildProcess.emit (node:events:519:28)
npm error gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm error gyp ERR! System Darwin 23.4.0
npm error gyp ERR! command "/Users/demo/.nvm/versions/node/v20.14.0/bin/node" "/Users/demo/mysite/ui.frontend/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm error gyp ERR! cwd /Users/demo/mysite/ui.frontend/node_modules/node-sass
npm error gyp ERR! node -v v20.14.0
npm error gyp ERR! node-gyp -v v3.8.0
npm error gyp ERR! not ok
npm error Build failed with error code: 1