I've encountered an error while trying to initiate my create react app with Typescript. Despite following all the necessary steps, including adding the .env file (with SKIP_PREFLIGHT_CHECK=true) and updating/reinstalling NPM, I keep facing this issue. What should be my next course of action?
> Executing task: npm run start <
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0216420e1f1f2f5f415e415f">[email protected]</a> start C:\Users\raahi\OneDrive\Desktop\typescript-react\my-app
> react-scripts start
Upon investigation, it appears there is a complication within the project's dependency tree. This could possibly not be a bug originating from Create React App, but rather an issue that needs local fixing.
The react-scripts package provided by Create React App mandates a specific version of "babel-jest": "^26.6.0".
Avoid attempting manual installation as your package manager handles this process automatically. A different version of babel-jest seems to be detected at a higher level in the directory structure:
C:\Users\raahi\node_modules\babel-jest (version: 24.9.0)
Installing incompatible versions manually can result in challenging-to-resolve issues.
To remedy the dependency tree discrepancy, consider executing the following steps sequentially:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Remove node_modules in your project folder.
3. Eliminate "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Proceed with running npm install or yarn, depending on your preferred package manager.
In most cases, these actions should suffice to rectify the problem. If still persisting, explore additional troubleshooting measures:
5. If you utilized npm, install yarn (http://yarnpkg.com/) and repeat the aforementioned steps using yarn instead. npm may encounter challenges due to package hoisting problems which might get resolved in future updates.
6. Confirm if C:\Users\raahi\node_modules\babel-jest resides outside your project directory. Accidental installations in your home folder could potentially cause such discrepancies.
7. Execute npm ls babel-jest in your project folder for identifying any unexpected packages (apart from expected react-scripts) installing babel-jest.
Should none of the above solutions prove effective, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project to bypass the preflight check if willing to proceed regardless.
Kindly note, we acknowledge the lengthy nature of this message but encourage you to carefully follow the steps outlined above :-) We trust they will provide beneficial insights!
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79140054180909394957485749">[email protected]</a> start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failure observed during execution of <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74190d5915040434445a455a44">[email protected]</a> start script.
npm ERR! The root cause is likely unrelated to npm. Additional logging output might be available.
npm ERR! Detailed log of this session can be found at:
npm ERR! C:\Users\raahi\AppData\Roaming\npm-cache\_logs\2021-08-07T19_47_30_824Z-debug.log
The terminal operation "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run start" finished with termination code: 1.