Vite - How to npm run dev when I have deleted both package-lock and package.jason folders? - node.js

Im following along a tutorial on YT on how to code and deploy a react website. I created my project using Vite. Everything was reflecting fine on my browser window until I closed the terminal and now my browser returned "This page can't be reached". So I tried running npm run dev one more time and I get a bunch of errors. Looked online for an answer and ended up deleting both the package-lock.json and package.json folders. Now when I run npm install I only get a rather almost empty package-lock.json folder. Is there a way to undo this? I feel like I messed around too much with the terminal. How can I go back to running npm run dev effectively?

You need to install the packages again,
You need to initialize the package again.
I'd suggest going through the source code in order to find out the name of the packages.
npm init
then all you need to do is
npm i pkg1 pkg2 pkg3

Related

Issue with NPM start ( React)

I have just tried to view an old application of mine using npm start but it wont load keep getting the error.
Cannot find module 'C:\Users\Team Knowhow\development\Punk-API\node_modules\react-scripts\bin\react-scripts.js.
I tried creating a new react app and NPM start works fine so have no idea what the issue is with my old react app and why NPM start does not work.
Have you installed dependencies first using npm install.
If done already, try removing node_modules folder and installing dependencies again.
Make sure you have installed all dependencies including react-scripts!
You've to ensure that all the dependencies that your application is using is mentioned in the correct manner with their correct version in your pacakage.json file. And if that looks alright then run
npm i
or
npm install
This command will download all the dependencies that are mentioned in your package.json file.

npm error: Cannot find module '.../immer.js' when building a create react app through CLI

I am trying to build a website using create react app and bootstrap. We are hosting the site via GH-pages and our repository is here. I have not had issues deploying the site locally until today, but have not yet been able to solve the problem after many hours.
I will go through the steps I performed to get me to where I am at.
Cloned repository through GH Desktop
Opened terminal and input brew reinstall node
Moved to project directory and input npm install react-bootstrap bootstrap#4.6.0 and npm install
Finally input npm start
I was met by this:
When I look in '.../node_modules/immer/dist', I see it contains 'immer.d.ts'. Further, when I look in '.../node_modules/react-dev-utils', 'immer.js' is present. I do not know much about Typescript, but the "main" entry looks like it is present, and the files are all present:
I have uninstalled and reinstalled the package manager, repository all day. I even reset my terminal and text editor to test it on a fresh reboot. I have gone through many StackOverflow questions and done things such as removing only the node_modules and package_lock.json files then inputting npm install, with no success.
Does anyone know what is missing? What should I do?
UPDATE
The problem with the 'immer' file was fixed by following the steps provided in the response: clearing the cache, updating the repository, getting a fresh clone, removing the damaged files, and installing npm.
After following these steps, the terminal returned this issue. I have tried troubleshooting this one as well, but feel like I am going in circles. Any directed advice helps.
First and foremost: exclude your node_modules file from git index. There is an entry in .gitignore to exclude it but it looks like you've included node_modules in index before adding that entry. Now you need to run a bit more sophisticated algorithm to get rid of it.
Quick troubleshooting for your problem (a bit redundant to my taste but just to make sure you didn't miss anything important):
# force cleaning npm cache. you may have a broken package there
npm cache clean --force
# clone repository into newly created directory (guaranteed to be clean)
git clone https://github.com/cameron-keene/ACE_Website somedir
# switch to the new directory
cd somedir
# remove broken node_modules
rm -rf node_modules
# remove (possibly) broken package-lock
rm package-lock.json
# fresh dependency install
npm install
Right now it looks like your immer dependency stored in node_modules is broken. As it has a lot of missing files and dist/immer.js is one of. That's why you're getting your error.
This problem was solved with
npm install --legacy-peer-deps
Shoutout to this Stack Overflow answer

VS Code cannot read Node Modules file when doing yarn install (it can read when doing npm install)

When ever I install my packages using Yarn, VS Code is not able to read the node_module files that are using in index.js or for that matter anywhere. However, when I do npm install, it starts working fine.
How can I fix this?
System: Mac - tried different Macs, same result.
I had a similar issue, and I had to do yarn init to get the package.json file to appear in the folder. Once I did that, adding a yarn add added the node_modules in the folder in vscode.

Bundling errors after updating an npm package in React Native app

I'm building a React Native app which, at this point, doesn't have too many dependencies.
Every time I update an outdated npm package, I am GUARANTEED to run into bundling errors. It could be any package. I then spend hours trying different ways to clear npm cache, project cache, etc.
Does anyone else have this issue? Is there a "standard" set of commands I should run after upgrading ANY npm package? This is extremely frustrating!
This screen shot shows today's flavor of the issue:
BTW, I'm on Windows 10, using VS Code. My React Native version is 0.63.1, Node version is 14.7.0 and npm version is 6.14.7
UPDATE:
After a couple of hours of messing around and removing node_modules folder several times and issuing the following commands a few times, it's now started to work. Unfortunately, I can't put my finger on what fixed it. As I said, I did the same things a few times.
Here are the steps I repeated a few times -- though once should be enough:
Deleted the node_modules folder
In root folder, I ran npm cache clean --force
I then reinstalled all npm packages by running npm i
Went into cd android folder and ran ./gradlew clean
Then in project root, I ran npm start -- --reset-cache
Unfortunately, doing this the first time didn't fix the issue. It looks like I have to waste a couple of hours for things to get back to normal! Any idea how to make this problem go away for good?
I think this error is that you have not start the metro bundle. Try react-native start and then re-run the app

Grunt test on cloned repository fail

I created a webapp at work by using Yeoman's generator-webapp, did some work, and then checked it in to git. I didn't change anything in the .gitignore, so none of the modules/bower components were in the git.
So when I got home, I tried to work on it a bit more. So I started by cloning the repository. Then in nodejs, I ran the following to install the project's dependencies:
npm install && bower install
I then ran grunt test to make sure it works, but what I got was an ERROR.
Warning: PhantomJS unable to load "http[colon]//0.0.0.0:9001/index.html" URI. Unable to continue.
But if I ran yo webapp again and overwrite everything except for existing files in /app/ to keep my work intact, the generator would install a bunch of things (which I don't know what they are), and then grunt test would work.
As I don't want to ask my colleagues who would be cloning this project to run the risk of overwriting the files in /app/, I'd rather they install the missing components. Can anyone tell me what to do to get this working?
Many thanks.
John.
Someone, somewhere told me to run the following command
npm install && bower install to install all the dependencies and it started working.

Resources