Introduction
This article is focusing on how to handle a certain error message when running ‘npm start’ command. Actually, it is a command for starting React JS application. So, before going to the solution part, the following is the actual execution of the command :
C:\app_react>npm start npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. > [email protected] start > env-cmd -f .env react-scripts start i ｢wds｣: Project is running at http://0.0.0.0:3000/ i ｢wds｣: webpack output is served from i ｢wds｣: Content not from webpack is served from C:\app_react i ｢wds｣: 404s will fallback to / Starting the development server... Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\app_react\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\app_react\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\app_react\node_modules\webpack\lib\NormalModule.js:471:10) at C:\app_react\node_modules\webpack\lib\NormalModule.js:503:5 at C:\app_react\node_modules\webpack\lib\NormalModule.js:358:12 at C:\app_react\ckan-fe\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\app_react\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\app_react\node_modules\loader-runner\lib\LoaderRunner.js:221:10) C:\app_react\node_modules\react-scripts\scripts\start.js:19 throw err; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\app_react\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\app_react\node_modules\webpack\lib\NormalModule.js:417:16) at C:\app_react\node_modules\webpack\lib\NormalModule.js:452:10 at C:\app_react\node_modules\webpack\lib\NormalModule.js:323:13 at C:\app_react\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\app_react\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\app_react\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\app_react\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.3.0 C:\app_react>cd ..
So, the React JS application is already running. But in the middle of the running process, it trigger an error message. The error message is appear in the end of the command execution. Actually, it exist in the following part of the output command below :
at C:\app_react\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.3.0
C:\app_react>
How to Solve Error Message ‘ERR_OSSL_EVP_UNSUPPORTED’ when running npm start
It is very easy for solving the error message. After searching through the google engine for answers, there is one article which is hinting the solution. Solution for solving the problem exist in this link. But actually there are many alternative solutions exist in that article. Fortunately, there is one alternative solution which is working as the final solution. In order to implement the solution, below are the steps in order :
-
So, first of all, before going after, below is the actual file which is responsible for starting the React JS application where it exist in a file with the name of ‘package.json’. Normally, it exist in the root folder of the React JS application as in the following structure :
C:\app_react>dir Volume in drive C is Windows-SSD Volume Serial Number is CA30-19A4 Directory of C:\app_react 08/16/2022 10:02 AM <DIR> . 08/16/2022 06:19 AM <DIR> .. 08/16/2022 10:02 AM <DIR> node_modules 08/16/2022 09:58 AM 1,484,785 package-lock.json 08/16/2022 09:58 AM 1,975 package.json 08/16/2022 06:20 AM <DIR> public 08/16/2022 06:20 AM 3,432 README.md 08/16/2022 06:20 AM <DIR> src 08/16/2022 06:20 AM 519,702 yarn-error.log 08/16/2022 10:02 AM 600,451 yarn.lock 8 File(s) 2,616,744 bytes 6 Dir(s) 87,910,707,200 bytes free C:\app_react>
Search the file with the name ‘package.json’ first.
-
Next, open the file with the name ‘package.json’ and look for the following part. As an example, it is pointing to the ‘start’ script which is responsible for executing or running the ‘npm start’ as follows :
"scripts": { "start": "env-cmd -f .env react-scripts start", "build": "env-cmd -f .env react-scripts build", "test": "env-cmd -f .env react-scripts test", "eject": "env-cmd -f .env react-scripts eject" }, -
So, the above is part of the script which is triggering the error message. According to the solution exist in this article, just add the following script to every scripts type :
--openssl-legacy-provider
By modifying the above part of the scripts with the additional ‘-openssl-legacy-provider’, it will looks like as the following below :
"scripts": { "start": "env-cmd -f .env react-scripts --openssl-legacy-provider start", "build": "env-cmd -f .env react-scripts --openssl-legacy-provider build", "test": "env-cmd -f .env react-scripts --openssl-legacy-provider test", "eject": "env-cmd -f .env react-scripts --openssl-legacy-provider eject" }, -
After saving the file with the above modification, just run ‘npm start’ once more. If there are no other error exist, the React JS application will run properly.