ReactJS, create-react-app gets an error - reactjs

I run from my console the "create-react-app practise1" command but it gets an error.
I couldn't understand why. Can you help me?
Normally I used it before as "create-react-app react-complete-guide" and this command had worked at that time.
I share all the codes that i get as screenshot.
Thank you,
My Console screenshot

You should probably have text like this in your error:
error Received malformed response from registry for "timed-out". The
registry may be down.
Currently part of NPM is down. https://status.npmjs.org/
Identified - Several packages including "require-from-string" are currently unavailable. We are aware of the issue and are working to restore the affected user and packages. Please do not attempt to republish packages, as this will hinder our progress in restoring them.
Jan 6, 19:45 UTC

This isn't a problem directly with create-react-app itself but one of it's dependencies it needs, require-from-string. And that issue is coming from the npm registry itself, and temporarily, not create-react-app. See this about the npm registry status and this issue from create-react-app itself:
What you can do, is if you have another project bootstrapped with create-react-app, you can copy it and make changes as neccessary for starting a new project. Or - you can wait until this issue from the npm registry is resolved. This is what happens when modern projects take a large number of dependencies - if a few of those dependencies aren't available, the whole project can have problems.

Related

React-navigation installation error(following official docs). Unable to resolve module #react-navigation/native-stack

There are a bunch of questions already covering this exact error, but I've been through all of them, and so far none of the answers have worked for me. Platform is MacOS
Here is the error:
Steps to reproduce
(Following official React Navigation docs https://reactnavigation.org/docs/getting-started/):
Create a new expo managed app
expo init my-app
Navigate to directory
Start the app
expo start
**** At this point everything starts and works correctly ****
Install reactnavigation(follow official docs https://reactnavigation.org/docs/getting-started/ )
yarn add #react-navigation/native
Install dependencies
expo install react-native-screens react-native-safe-area-context
Wrap the code with a Navigation container (per the docs)
Start the app
expo start
**** App no longer works. Fails with the error I posted earlier ****
Things I've tried that haven't worked
The instructions that the error message provides (though I skip step 1, as I don't have watchman watches installed). Main thing here that I would expect to work is the deletion of node_modules and yarn.lock, but no luck :(. Same with deleting cache
using yarn add to add the dependencies instead of expo install
using npm to install everything
updating expo-sdk (I'm already on latest)
reinstalling everything
So, I actually was able to answer my own question in the process of writing it. I often do this, as I make sure to spend several hours trying to debug in the process of writing the question and making sure I've covered everything I can think to try.
Not sure of official self answer etiquette, but this was a pretty frustrating error for me, so I figure I'll post what worked for me here in case it can help anyone else in the future.
Answer:
The issue for me had nothing to do with the code or app itself, but rather the IOS simulator. Force quitting the simulator and restarting resolved the error. It seems that simply ctrl^c -> expo start -> i -> r is not enough to clear the internal state of the simulator.
There was actually even a clue in the error message itself, but I missed it because the error looked so similar to the one I was expecting. The clue was in the name of the module it was unable to resolve "#react-navigation/native-stack". In my reproduction steps, I was only using the NavigationContainer, as I was trying to get that working before installing any of the Navigators and trying to use those.
Why was it trying to resolve the native-stack navigator? I'm not 100% sure, but my guess is that there was some kind of cache in the simulator that wasn't being cleared properly. Why do I think that?
This problem started with me trying to use a native-stack navigator in another app I'm working on. I quickly ran into this error, and figured the best way to debug would be to spin up a brand new blank app and try to get ReactNavigation working in there. I started with just navigation package and NavigationContainer itself, and once I couldn't even get that working, I assumed the problem was with the base react-navigation package installation. I failed to notice that it was still trying to resolve that native-stack navigator.

Hot reload stopped working after adjusting environment for work requirements

I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.

Why is create react app npm start deploying previous version of code?

When running npm start to deploy my code to localhost:3000 the version displayed is a previous version of the code.
I've tried resetting my editor (Visual Studio Code) and Node.js. Tried disable cache in the network inspector of Chrome.
The browser will reload upon a save, however it will not use the correct code. It continues to 'hang' on the previous version.
This is potentially an issue with the create-react-app service worker.
Can you please look for that file, and remove it or comment it out?
Otherwise, it is possible you have an error in your code.

React Native: NPM Module being uninstall each time a new is installed

I am using a package named react-native-linear-gradient which can be found here. I had to go through quite a lengthy process to eventually get the link to my project (by manually linking via the Binary link with libraries in XCode. I got it working fine, however, each time I install a new package via NPM, linear-gradient is removed from my node-modules folder.
1.Can anyone shed some light on why this is happening? (Happy to provide additional information)
2.Will this impact deployment of the application if this is not solved?
SOLVED: Downgraded to 5.7.1... It seems 5.8.0 seems to cause the same error Michael mentioned.

scripts/web-server.js is missing in AngularJs Seed and not able to run npm start

I thought working Angular from Angular-Seed project since it contains good app structure and testing capability.
I have taken angular-seed master from the website (https://github.com/angular/angular-seed) below i have screenshot of App for reference.
Since in angular-seed, it was not given clearly how to execute a webserver, I referred a tutorial npm website (https://www.npmjs.com/package/angularjs-seed), how to kick start angular-seed.
As said, I have installed node in my system and it is working fine, below you can find the screenshot. Then I tried to start the webserver using web-server.js in scripts folder but i couldn't find it. Thought of Starting the server (npm start) as given in Angular-Seed but unluckily there is an error.
Even in this blog i find there is a script folder but currently i couldn't find it in angular-seed-master.
Currently I'm totally gone how to proceed with it.
Could somebody help me on this or if anything i missed or wrongly understood.
Please let me know in case of further details.
Node Instance
Npm Start Error
Angular-Seed and App Structure for reference
--------------------------------------EDIT: -----------------------------
The above problem is solved, but there are other couple of issues occurred while using npm start. A detailed error given in the screenshot below.

Resources