How to run the NPM RUN BUILD - reactjs

I have for now 7 days tried to build my ReactJs project but it never works.
quick update,
I can do npm run build like every 50-100th time i run it, I just have to be keep running the command and waiting for it to succeed .
When I do NPM RUN BUILD in vscode I always get the error
(copy plugin) Error: EBUSY: resource busy or locked, copyfile
'L:\react\Greta100Weeks\greta100weeks\notistack\src\index.d.ts' ->
'L:\react\Greta100Weeks\greta100weeks\notistack\dist\index.d.ts'
I tested to build on different locations to rule out that the folder or file was locked. I turn of MacAfee LiveSafe background scanning virus. I don't have any Drive syncing locking folders
I use the Windows 10 Resource Monitor to see if the notistack folder and the files are locked by some process and they are not, it's super strange. I have no backup process on that folder, Mcafee LiveSafe is turned of also
I notice that npm run build works like every 20-30 times i run the command . When I restart computer it worked one time also. It's like something is polling locking the files randomly
Another thing I can see is that the error say that the file "index.d.ts" can't be copied. I then open the notistack\dist\ folder and see a "index.d.ts" file and when I open the file in notepad++ I see this: just a bunch of NULNULNULL..........
Here I try running npm run build on a fresh fork of the notistack in the cmd window

I did what you did. Cloned repo of Notistack. did npm i and then npm run build. it worked for me.
From your screenshot, i tried to match it with mine. i found that probably you haven't installed node modules at proper place. when you clone the repo. it already creates a notistack folder on top of where it is located on your computer.
The differnce i found is, both your paths should partially match till notistack folder. In your ss, JSON is written at perfect place, but typescript path is different from mine.
so from your screenshot, i think you should try doing npm i at
L:\react\Greta100Weeks\greta100weeks\notistack
I hope it makes sense !

Related

An npm enoent error appears when using React. I have tried everything that I can

I have been using the react tutorial of freecodecamp and I'm still stuck in the first step of using react. It appears that error of nmp enoent when I make my first app . I have used everything I have read on the internet but nothing seems to help. At the same time I realized that localhost:3000 doesn't works
To solve this error, you need to –
Close all the open terminal windows.
Even of other projects.
Restart the Metro bundler.
You may also check if you are using the wrong folder name in terminal. Sometimes, we delete a folder and still inside that folder in terminal. That will create issues. So, leave that folder and enter again. For example –
cd .. && cd folder_name

React server on browser is not auto-refreshing

I was following this react course from YouTube.
I installed the create-react-app successfully and also ran the localhost server successfully on my browser afternpm start.
But the problem is that whenever I make a change in the component and save, I have to keep refreshing the browser by myself (browser is not refreshing automatically on save). But the browser of the teacher in that video refreshes automatically.
Please help me. Am I doing something wrong? or what should I do?
I think the best option is to use: npx create-react-app your-app-name when creating your apps so you can always have the most updated version. As per the docs: https://reactjs.org/docs/create-a-new-react-app.html
The best option would be to create your project in a C-drive ( any directory/folder in C drive), where your node packages were installed during the first setup of the node. I had a similar issue when my project was in D-Drive's Directory but switching to C Drive's Directory "C:\Users\USERNAME\Documents\ReactProjects\frontend\src" fixed my issue.
There might be different reasons why this is happening. Try one of the following solutions:
1 --> Increase the maximum number of allowed watchers in your linux environment. This is a known issue when running webpack inside of a VM like WSL2, as it happens when you execute npm start. To do so, issue the following commands in your terminal:
sudo nano /proc/sys/fs/inotify/max_user_watches
Replace the number you see with 1048576 and save the file. Then type exit and relaunch the terminal. Try npm start inside of your project folder again.
2 --> If the above didn't work, try setting the CHOKIDAR_USEPOLLING=true environment variable in your linux environment, which will reflect on your react development environment. Normally you would put this in a .env file inside of your project folder, but adding the variable to your .bashrc file will make it work with any React project you are working on. If you are only experimenting with React for now, I would recommend this solution. This change is unfortunately necessary when working inside of a virtual machine like WSL. Add the line export CHOKIDAR_USEPOLLING=true at the end of your .bashrc file. To edit your .bashrc file:
sudo nano ~/.bashrc
Then save the file and exit/relaunch your terminal. Try npm start inside of your project folder again. Hopefully this should fix it.

Running into the same error when pulling a new version of the react app

We have a react app on a shared repository. However, for some reason it seems like only one person could work on it. When a person works on the project and pushes a new version, and another one of us pulls and run the new version, we get this error:
'react-scripts' not recognised as an internal or external command, operable program or batch file.
I know this can be solved if I do npm install some package, but the fact that we have to do it every time seems to me something is terribly wrong. Our computers are either Linux or Mac, but I don't think its a OS problem since I can be working on Linux and push new files but my partner also with a Linux runs into the problem. Furthermore, we tried syncing our npm and node versions but to no avail.
Any help would be appreciated.
The problem seems to be with the node_modules folder checked-in into your repo.
node_modules are not meant to be checked in into the repo. If you do this, and use the same repo for Linux and Mac, a lot of things can go wrong.
When you run npm install, the installer pulls packages for you, and very often some packages get compiled for your platform after the installation. If someone checks in a package compiled for Mac, it will break on Linux. Also, all symbolic links will be broken.
Add node_modules to gitignore file.

React web-page won't display on server

I have been trying to deploy my create-react-app on a server but have been unable to do so. I created a homepage field in the package.json as instructed and set it to the https://... domain address. Then I ran npm run build and created the build file. I am finding resources sparse online, instructing me what to do after. Running npm start just runs from the root directory, not displaying anything. The source shows and index.html file which paths are stuck at the root. I am wondering what I need to do to run/deploy the build(production). I have tried downloading the npm package serve, but this seems to do the same as npm run, if not worse. I feel like I am only moving in the opposite direction, and would love some assistance. Thank you.
You need to run npm build.
This creates files in the build folder.
These files you then need to take and put them in a folder that is served by a web server.
You can use Nginx, Apache, IIS or any other production ready web server.
You have an IT department, ask them where exactly you need to put your files.

How can I download create-react-native-app files manually?

I trying to create a react native project, but always it gives me an download error (the create-react-native-app is installed), I try:
create-react-native-app Test
But always in the file ngrok-2.3.0.tgz I get an error. I downloaded the file manually, but I don't know where it goes, I try to put in AppData/Local/Temp (shown in the error text), but when running the command again, it overwrite the file and try to download it over again. Where are the react-native files to which I can put ngrok-2.3.0.tgz manually?
The registry had some issues a few days ago resulting in the same error.
Take a look https://github.com/npm/npm/issues/19816
You can also try doing things with yarn
Offline packages can be done with yarn link ngrok which will indicate yarn/npm to get the local copy of ngrok.

Resources