Start the front-end template : error:0308010C:digital envelope routines::unsupported

[565ee]

OS : centos stream 9 Rust : 1.61 substrate : 2022-05 3.0 polkdadot : 0.9.20 substrate-front-end : 2022-02 nvm node nodejs : 16.14.0

success : Start the local Substrate node

when i Start the front-end template yarn start , it show error

Failed to compile.

Error: error:0308010C:digital envelope routines::unsupported
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)
asset static/js/bundle.js 46.7 KiB [emitted] (name: main) 1 related asset
asset index.html 2.27 KiB [emitted]
asset asset-manifest.json 277 bytes [emitted]
cached modules 27.2 KiB [cached] 9 modules
modules with errors 156 bytes [errors]
  ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js 39 bytes [built] [1 error]
  ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8000&pathname=%2Fws&logging=none&reconnect=10 39 bytes [built] [1 error]
  ./node_modules/webpack/hot/dev-server.js 39 bytes [built] [1 error]
  ./src/index.js 39 bytes [built] [1 error]

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at filename (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:102:23)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:128:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:194)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:97

ERROR in ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8000&pathname=%2Fws&logging=none&reconnect=10
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at filename (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:102:23)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:128:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:194)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:97

ERROR in ./node_modules/webpack/hot/dev-server.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at filename (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:102:23)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:128:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:194)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:97

ERROR in ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at filename (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:102:23)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:128:39
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:3:103)
    at _next (/home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:194)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:364
    at new Promise (<anonymous>)
    at /home/lzh/substrate-node-template/substrate-front-end-template/node_modules/babel-loader/lib/cache.js:5:97

webpack 5.70.0 compiled with 4 errors in 1753 ms

[ghe0]

This happens when you have a new version of NodeJS using webpack 4. The simple solution is to downgrade node to LTS, which will depend on your setup. Installing nvm and running nvm install --lts is an option. Another option is to use the package manager of your distro. Finally, you can also run the entire repo in a docker (or podman) container that has an older version of NodeJS.

Assuming the above does not help you and you just want to hack yourself into a dirty solution, you will need to first enable legacy openssl algorithms at OS level, in /etc/ssl/openssl.cnf:

[provider_sect]
default = default_sect
legacy = legacy_sect

[default_sect]
activate = 1

[legacy_sect]
activate = 1

This is obviously not safe so a permanent fix is preferred. Anyway, moving forward, you should now be able to run:

$ export NODE_OPTIONS='--openssl-legacy-provider';
$ yarn start

This will allow react to start with the legacy openssl provider.

[ltfschoen]

nvm node nodejs : 16.14.0

i think @565ee may have chosen v16.14.0 because the CircleCI file uses it here

i instead used lts/gallium (i.e. Node.js 16.18.0), which is mentioned in the .nvmrc file and got it working in a docker container by following the steps I mentioned here to use the appropriate version of Yarn 3 https://github.com/substrate-developer-hub/substrate-front-end-template/issues/259#issuecomment-1345657616.

Finally, you can also run the entire repo in a docker (or podman) container that has an older version of NodeJS

This repo seems a bit stale with old PRs that haven't been merged for a while likely due to other priorities, but I can create a PR with the docker files I use for developing this repo in a development environment with hot reloading (I used node:gallium-alpine) and deploying to production with nginx if given the go-ahead by someone willing to review and if the community is interested? (@shawntabrizi @NukeManDan @jimmychu0807)