React18 Compiler Errors

​Mid project, when I added new custom components and wrapper  the compiler started to fail. 
Initially I got the following error: 
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

I've tired many avenues to correct this but all failed.
This is the solution that worked:
I removed node packages and package.json & package.lock.json files. 
Ran npm install. 
Updated the package.json "scripts"  with the following:

"start": "react-scripts --openssl-legacy-provider start ",
"build": "if-node-version '>= 17' && react-scripts --openssl-legacy-provider build || react-scripts build"

Used npm run build command and npm start right after. Which finally fixed the application error and I was able to see output in the browser. 

However I faced a new error that indicated that the jsx code is not compiled as it should: 
Error message :
​'React' must be in scope when using JSX react/react-in-jsx-scope.

I managed things to run better by un/reinstalling react-scripts, react and react Dom.
But the components were still not recognized. 

I've noticed that in vscode terminal output the following prettier items were set to false. 
"jsxBracketSameLine": false,
"jsxSingleQuote": false,

To correct this added the following code to package.json this includes some of my personal preferences and setting the jsx values to true.  
"prettier": {
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"singleAttributePerLine": false,
"bracketSameLine": false,
"jsxBracketSameLine": true,
"jsxSingleQuote": true,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2
},

The next key step was to update the imports of jsx in the component files:
import { jsx as _jsx } from "react/jsx-runtime";

Used npm run build again and restarted my server with npm start. 

Finally the app was fully functional again. I hope this saves you time! 

Some of the tools were used in the project: 
Mac M1, Node v19.1.0,  React 18.2.0, React-scripts 5.0.1, React-dom 18.2.0,
React-router-dom 6.8.1

Home