I am having troubles on runnning a code online, it's the sliding image puzzle from this link: https://www.youtube.com/watch?v=_wdbhVvMOCs and here is the github from the video's description: https://github.com/danba340/react-sliding-puzzle
If I type in npm start, it shows
this error on the local host.
After running it on the VS Code, it shows
this error that says \node_modules\react-motion doesn't exist.
Whenever I try npm install --save react-motion , it shows
this error on the Visual Studio Code.
Please help me this is for my project thank you!
The reason is because the library doesn’t support react 17 yet.
Try by reinstalling your modules from scratch with the following:
rm -rf node_modules package-lock.json; npm i; npm i react-motion
If that doesn’t work, you’ll need to force the installation:
npm i react-motion —-legacy-peer-deps
If the library still have problems, you’ll then need to downgrade react to version 16 instead of 17 to make it work.
Last but not least, if you don’t want to downgrade, you can try to do the same by using yarn instead of npm
**what is the difference between setting up react-native- cli with npm install -g react-native-cli and init versus using npx react-native init ?
I recently got a lot of eneont errors while developing react-native app. firstly i setup my system with npm install -g react-native and was working fine but later while installing dependencies they got eneont errors like could not find fsevent, nanoid, hammerjs etc.
And the official documentation includes setup to use npx. I really got confused with this sort of approach.
could you please light some knowledge on npm vs npx and installing with '-g' argument?
npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials.
With npm you install the package on your machine. And global makes it available to all your projects not only the one where you currently work in.
As yesIamFaded pointed out, the npx command does indeed download the package for each time you run the code and from a networking standpoint it might beneficial. However, as per React-Native documentation (which you can find here) the cli has been deprecated and it may cause issues. To quote the doc:
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.
So personally i would not go near it.
When I want to create a react app I'm encountering the following error:
npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react-is (over 30000ms)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\info\AppData\Roaming\npm-cache\_logs\2020-04-23T02_54_45_865Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting app2/ from C:\Users\info
Done.
Sounds like you have a slow connection. Try increasing the timeout from 30s to 60s by adding this to your .npmrc file:
timeout=60000
You could also try adding
prefer-offline=true
if you are trying to save bandwidth or have a slow connection
Note: if you don't have an .npmrc file setup yet, you can create one here
for Windows: C:\Users\{username}\.npmrc
for Mac/Linux ~/.npmrc
Or you can create one in the same directory as your project's package.json file.
I had a slow connection and I updated the timeout value to .npmrc using:
npm set timeout=100000
And to check if the value is updated (Mac): vi ~/.npmrc
Users are extremely likely to face this issue if they are on a slow internet connection. To counter this, you need to increase the timeout in the npm's config file. And here's how to do it:
Find the .npmrc file (located in the nodejs installation folder; in my case, it's in F:\Installations\nodejs\node_modules\npm folder. But for you, it might be in C:\program files folder).
Open the .npmrc file and append this line: timeout=240000 (usually it is 60 seconds I suppose, but since my connection was way slower therefore, I had to increase it to 240 seconds or 4 minutes, you can keep it 120000 for 120seconds)
Save the file
Since create-react-app fails midway, it can easily break npm's package.json file thus leading to this sort of issue:
Unexpected end of JSON input while parsing near
Therefore, before running the npx create-react-app, run the following command: npm cache clean --force as it cleans the cache and (i think) repairs the package.json file.
I was facing the same issue. I Solved it like this:
create a new file with no name just an extinction of .npmrc
open this file in any editor and type timeout = 90000
save the file and in you terminal type
npm cache clean --force
npm install create-react-app
npx create-react-app ./
Note: this error occurs because of slow internet speed
This error occurs due to slow internet connection. Try installing when you get a better speed. If better speed doesn't solve your problem try this.
npm cache verify
npm cache clean --force
I enabled IIS and the issue was solved for me:
do to Control Panel -> Programs -> Programs and Features
click on Turn Windows features on and off
make sure the Internet Information Services is checked
click OK and wait for some minutes
I was facing the same issue when create a react-app using npx create-react app . And i fixed my problem by running the following command.
npm cache clean --force
I hope you find this helpful
I fixed the problem by setting timeout in user local .npmrc file to
timeout=600000
90000 is not enough for downloading many packages for projects with lot dependencies in package.json
In case you are still running into this issue below with the error:
Invalid response body while trying to fetch
https://registry.npmjs.org/eslint-config-react-app: Socket timeout
Run this script: npm install react --registry=https://registry.npmjs.org
and then npx create-react-app mypp
for your react app installation. Happy coding
I fixed the problem by running:
npm config set registry "http://registry.npmjs.org" --global
It appears the problem is related to the following post:
npm install gets stuck at fetchMetadata
And #CptUnlucky's solution worked for me on macOS Catalina 10.15.7, node v16.0.0, npm v7.12.2, nvm v0.38.0
I was facing the same issue and I solved it by enabling the Internet Information service (IIS) feature of the window.
Enabling the IIS
Steps:
Windown + r
Type appwiz.cpl and click OK
click on Turn window features on or off (on the Left top side)
wait some seconds and check the Internet information service option
Now wait until window apply changes.
create project again.
I have faced the same issue. I tried all solutions over StackOverflow or Github discussions but nothing worked.
I changed the .npmrc file under the Users folder in C in Windows and changed the timeout from 30000 to 90000. See if 60000 works!
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue
you can check more details about it at
https://github.com/npm/cli/issues/1185
You just need to run npm i npm#6.13.7 or npm I -g npm#6.13.7 if you wanna this to be global version.
After that, just to make sure, run " npm -version " to see what version you are using.
Downgrading to npm version 6.13.7 worked for me.
Try this:
npm cache clean --force
npm config rm proxy
npm config rm https-proxy
And remove your node_modules within your user.
In Windows, it is
C:\Users\${select_your_user}\AppData\Roaming\npm\node_modules
I was facing the same issue when running npm install on Docker.
I had to pass the HTTP and HTTPS proxy values to the image while building it.
docker build --build-arg HTTP_PROXY=http://<your_company_proxy> --build-arg HTTPS_PROXY=http://<your_company_proxy>
It worked fine after I passed these parameters.
In my case it was the issue related to npm verison 6.14*
Downgrading to npm verison 6.13.7 solved for me
npm i -g npm#6.13.7
It's also an newly opened issue you can check more details about it at https://github.com/npm/cli/issues/1185
it is works for me
Editing the .npmrc file to 80000 works. If not, globally uninstall create-react-app:
"npm uninstall -g create-react-app" then run "npx create-react-app ./"
I recently have the same issue and following steps would help you.
npm config set registry "http://registry.npmjs.org" --global (sets registry) (Try Again)
Go to you user folder find .npmrc file there and remove content of it.
run npm cache clean --force
still errors - Remove the content of npm base folder usually inside User/AppData/roaming/npm/...
I tried everything including factory resetting my Mac. Then after reinstalling everything and still having the same issue, I typed into the terminal and ran:
npm set timeout=100000
then sat my computer next to my router and ran npx create-react-app again and it worked!
Sometimes it won't work if you use only letters in your app name e.g first I have used "myapp" and that was not working though I have done all the other stuffs correctly like set timeout = 240000 in .npmrc file and run the following commands
npm cache clean --force
npm install create-react-app
npx create-react-app myapp
but that not working for me then I have just changed my project name from myapp -> my-app and it worked perfectly. So, If you are facing the same issue try them out. Hopefully, it saves your time.
I tried many things for 3 days, then i figure out that new versions of nodejs doesn't work so fine for some computers, i downgrade to 16.0.0 and then worked
Regarding npx ...
If you have create-react-app (CRA) globally installed;
it is recommend you uninstall CRA
to ensure that npx always uses the latest version.
When using npx, the global installation isn't used.
But it may interfere (addressed below).
Don't run your React app from your desktop.
Some operating systems may throw an error.
Windows OS users ...
As administrator (for steps #1 & #2), inside your command-line ...
1) uninstall your global version of CRA.
npm uninstall -g create-react-app Mac prefix: sudo
2) Then ...
Run: npx create-react-app my-app Mac prefix: sudo
Above: This will create the latest version of
a React app named: my-app.
This app will be created wherever your command-line is pointing.
3) Open Google Chrome.
4) cd my-app (point your command-line to your project folder).
5) inside your command-line ... Run: npm start
It's my first time trying to use it, but after executing:
create-react-app myproject
I get:
Creating a new React app in C:\project
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
[ ................] \ fetchMetadata: sill resolveWithNewModule js-tokens#4.0.0
And it just hangs there forever.
I'm using npm 5.6.0 and create-react-app 2.0.3 on Windows 8.
I had this problem, mine got stuck at
Creating a new React app in C:\project
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
[ ................] \ fetchMetadata: sill resolveWithNewModule react-is#4.0.0
The solution for me was to ensure npm is up to date by running:
npm install npm#latest -g
After this, create-react-app worked correctly.
If you get stuck while running create-react-app, just Ctrl + C to end the process in the terminal or CMD.
Then end task "node.exe" from task manager (if you use windows).
Then run in your terminal:
npm install npm#latest -g
npm install create-react-app -g
npx create-react-app (your-project-name)
cd (your-project-name)
npm start (inside your code editor, e.g. VSCode)
Note: beware of npm vs npx in the commands used above
What I just did is press ctrl + C. My intention is to abort the process, but turns out the process is continue. Still not know any further logical explanation of the 'solution' that I just did, though.
Re-install Node js 32 bit.
My problem got fixed and same issue was there. Solution is to uninstall Node js and reinstall 32 bit Node js.....Enjoy Thanks
I was having the same problem, what i did is to run the command in nodejs command prompt instead of command prompt. it worked for me
Since you have npm 5.6.0, let try using npx
Open cmd:
Locate to you C:\project
C:
cd C:\project
Run npx and start the sample project with npm:
npx create-react-app myproject
cd myproject
npm start
npx come out since npm 5.2, and just read the document from create-react-app here
Open a new terminal/CMD, type resmon and hit enter. Go to overview tab and search for
cmd.exe (for windows users), straight to that, search for suspended. Yes this is the culprit. Right click on that suspended, and click 'resume process' and hit enter.
Click continue if any pop-up occurs :).
That's it you are done. you will see that your installation will continue :).
Repeat the same process if CMD hangs.
adding nodejs path in User Variable worked for me.
Try this; it worked for me:
npm install -g create-react-app
then run your command.
I've been using create-react-app to make some projects in react and also for practicing, and usually the way to run the project is to use the command npm start from the root directory of that project in the terminal. This has since stopped working for both my old projects which I haven't touched or completely new ones, and followed the exact instructions given by the error already to no effect.
An image of the error, the very top of the terminal is immediately after the npm start command:
I have been googling this over the past two days and I simply can't figure it out. I'm hoping someone with better knowledge would know the root of why npm start has stopped working. Please keep in mind that I already tried the suggestions provided by the error in the terminal.
What's really mind boggling is I haven't changed pcs or done any editing in the old projects such as the one in the picture above, re-installed a bunch of stuff I thought might have been causing issues like npm or babel but they simply don't launch anymore.
Also almost forgot the error log, which has been even more confusing to figure out or google:
You have problem with your dependencies. Please run
npm i
inside project directory.
As your console shows, you can try
remove your node_modules directory
delete file package-lock
I suggest clean npm cache (npm cache clean -f)
and reinstall node_modules using
npm i
There are many reasons to cause this problem.Some suggestions here:
1.uninstall babel-loader and create-react-app globally
npm uninstall -g babel-loader
npm install -g create-react-app
2.remove the error package
rm -rf ~/node_modules/babel-loader
3.stop all the command then clean up the cache of npm