Using Node v20+ for AEM react project

Forum|Forum|1 year ago
June 24, 2024
1 reply
3148 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

EstebanBustamante

Community Advisor and Adobe Champion

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-routinesunsupported

Hope this works

Esteban Bustamante

danchapmanAuthor

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded