GitHub Community
Code in Terminal for React app creation stuck in loop #151670
-
BodyHello, I am currently halfway in a 3 month software development program and having the following problem when trying to work in React: I tried to install SASS into my project after initially installing Vite & creating a React App successfully and I got the below error. I was unable to troubleshoot this and decided to recreate my repository and project from scratch to hopefully correct this. Now when I try to install a new Vite project it alternates between 45 vulnerabilities and 2 vulnerabilities each time I run npm audit fix --force after running npm install for the React Vite process. 45 Vulnerabilities gives the following error in my VS Code Terminal: 2 vulnerabilities gives this error: Please advise me ASAP on how to correct this, I am working on a Windows 11 system setup and I believe everything on my system is up to date. I have been stumped on this for a few hours and tried to look online for help but no clear solutions have been found. Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 7 replies
-
|
Hello, you can try 1. Clear Your NPM CacheSometimes, dependency conflicts arise from cached versions of packages. Run: npm cache clean --forceThen, delete your rm -rf node_modules package-lock.json # macOS/Linux
rd /s /q node_modules package-lock.json # Windows PowerShell2. Use a Clean Vite InstallationInstead of repeatedly running Create a Fresh Vite React Projectnpm create vite@latest my-project -- --template react
cd my-project
npm installAfter this, check if running 3. Manually Update Problematic DependenciesInstead of using Upgrade Vite & PostCSSnpm i vite@latest postcss@latestUpgrade Other Vulnerable DependenciesCheck if specific packages are outdated and update them: npm outdated
npm update4. Switch to Yarn or PNPM (If Issues Persist)If NPM keeps causing dependency problems, try an alternative package manager: Using Yarn: corepack enable
yarn create vite my-project --template react
cd my-project
yarn installUsing PNPM: npm i -g pnpm
pnpm create vite my-project --template react
cd my-project
pnpm installFinal CheckRun: npm audit |
Beta Was this translation helpful? Give feedback.
-
|
Having the same issue as OP except only with Vite. I have tried all the steps above but only # 4 works. I am on a Mac OS Monterey. |
Beta Was this translation helpful? Give feedback.
-
|
The the issue is possibly with multiple vite versions conflict, these yarn, pnpm managers help actually use a specific version of vite that actually might have fixed the problem. So OP has to check how many vite versions he has, Set the default vite version globally, and remove the rest. |
Beta Was this translation helpful? Give feedback.
-
|
Hey! It sounds like you're running into dependency version conflicts while setting up your React project with Vite and SASS. No worries this is a common issue in JavaScript projects! Here are a few steps to try and resolve it: 1️⃣ Start Fresh – Clear EverythingFirst, completely remove your rm -rf node_modules package-lock.jsonor on Windows: rd /s /q node_modules & del package-lock.jsonThen, reinstall dependencies: npm install2️⃣ Avoid
|
Beta Was this translation helpful? Give feedback.
-
|
💬 Your Product Feedback Has Been Submitted 🎉 Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users. Here's what you can expect moving forward ⏩
Where to look to see what's shipping 👀
What you can do in the meantime 💻
As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities. Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐ |
Beta Was this translation helpful? Give feedback.
-
Solution to Force Vite to Use esbuild@0.25.0when update esbuild@0.24.0 to esbuild@0.25.0 The issue is that Vite is still using esbuild@0.24.0 internally, even though you've installed esbuild@0.25.0 globally. Since Vite defines esbuild@0.24.0 as a dependency, npm installs it inside node_modules Update esbuild npm install vite esbuild@latest Open "esbuild": "^0.24.0" or "esbuild": "^0.25.0",Now, add the override inside "overrides": {
"esbuild": "0.25.0"
},Save the file and npm installAfter updating, check that all instances of esbuild are using the correct version: npm ls esbuild🚨 After updating and getting the version it can be found Should-be └─┬ vite@<your version>
└── esbuild@0.25.0🚨 This is a temporary solution until Vite updates its dependencies and after get solution: 1️⃣ Remove 2️⃣ Run:
I wish you success ☺
|
Beta Was this translation helpful? Give feedback.
-
|
This helped me, thank you |
Beta Was this translation helpful? Give feedback.
-
|
Hey, Every step is worked and it tells 0 vulnerabilities at the end, but when remove the |
Beta Was this translation helpful? Give feedback.
-
|
Yes I know, but unfortunately the problem is still new, so we are expected to wait for a new update from vite to update its dependencies. Until that happens I advise you to keep the overrides in package.json until the problem is fixed from vite and then you can delete it👍. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Thank you for the temporary solution, tried the same as suggested by @ahmed-abd-alalim which solved the issue for time-being. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @AmandMilette! We're going through discussions that haven't been marked as answered yet. Did the replies from other members help you resolve the issue you raised? If so, can you please mark their response as the answer? When you mark a question as an answer, GitHub will highlight the comment and replies to the comment to help visitors quickly find the answer. |
Beta Was this translation helpful? Give feedback.
Solution to Force Vite to Use esbuild@0.25.0
when update esbuild@0.24.0 to esbuild@0.25.0 The issue is that Vite is still using esbuild@0.24.0 internally, even though you've installed esbuild@0.25.0 globally. Since Vite defines esbuild@0.24.0 as a dependency, npm installs it inside node_modules
Update esbuild
Open
package.jsonand delete this line insidedependenciesif you had itNow, add the override inside
package.json:Save the file and
reinstalleverything:After updating, check that all instances of esbuild are using the correct version:
…