 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 |
