How to fix npx create React start up screen on terminal? - javascript

I have no idea what's going on here. Earlier today I was able to create React apps perfectly fine.
After typing in npx create-react-app <name> everything would load, and it would show me the basic npx commands.
But now, this weird output is showing up and I have no idea what to do:
P.S. I have a 2017 Macbook Pro running Catalina 10.15.3

you must ensure you have free space in your device
If it doesn't work for you, if you can explain the problem better

Looks like the problem is with fsevents. Try adding this to your package.json:
{
"resolutions": {
"**/**/fsevents": "^1.2.9"
}
}
Delete yarn.lock and run yarn install again. Or if you're using npm, delete package-lock.json, run npm install.

Related

Terminal stops running commands after switching Node's version with nvm

Hope to find you guys well =).
So, my problem is that I'm trying to initialize a Gatsby project and after some trouble I discovered that for some boiler plate "starter" template to work I would have to install an older version of Node. Since I already have nvm installed, I just downloaded the version I wanted and switched via terminal.
I verified it with node -v and it threw me the version I wanted. The thing is that when I try to run 'gatsby develop' it says "gatsby: command not found".
And that if I close and open my terminal again it resets the version. Is this supposed to behave like that?
By the way, you can already tell that I'm new at this so any information or guidelines will be of extreme helpfulness.
You can try doing yarn develop if using yarn. Or npx develop if using npx

why can't Gatsby command work even if I have installed it?

I have followed a tutorial to create a folder that holds all npm globally installed, but I still can't run gatsby command even if I have installed gatsby-cli. What is wrong?
It seems that your environment does not recognize gatsby command.
Try this:
npm install -g gatsby-cli
If the error persists, try to close and reopen the shell, sometimes it caches the previous state.
You can check for further details here.

React Native console.error version mismatch [duplicate]

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
Getting the following message when I init a new project and then launch the Xcode emulator:
React-Native Version Mismatch
Javascript Version 0.50.1
Native version: 0.50.0
Make sure you have rebuilt the native code. ...
Does anyone know what is going on here and can help me?
This is what I've done with it:
Close all terminals and run build again.
You may forget to close nodejs terminal from another project, and they happen to have installed different react version.
So the code fetches from nodejs server conflicts with the native one.
In case you created your react-native app using create-react-native-app. You should have a app.json (expo). and a package.json file, check if the expo versions match and change accordingly. For example in my case the problem was that in the app.json file I had a 25.0.0 version for the expo sdkVersion attribute, I change that to 23.0.0 and everything worked.
package.json:
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "^0.50.4"
}
app.json:
{
"expo": {
"sdkVersion": "23.0.0" // before was 25.0.0
}
}
Just go to your android/app/build.gradle and then add to the dependencies section:
dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true }
}
/// the react native version can be found in package.json
For Android developers who couldn't get it fixed by just closing and rebuilding, Manually uninstall the app on the emulator/device.
just force react native version in your android's app level gradle file, in the dependencies section.
compile ("com.facebook.react:react-native:0.52.0") { force = true }
worked for me
If you're running your React Native app through Expo, upgrading React Native is liable to cause this error (as noted at https://github.com/expo/expo/issues/923).
If that's your scenario, your options are:
Bump Expo (which is listed in your package.json) to a version that is compatible with your React Native version (if one exists, which may not be the case - judging by the linked issue, I figure that Expo support trails React Native releases).
Discard your changes, delete and reinstall your Node modules, Eject from Expo, and then (after checking that you can still run your app post-ejection) try your upgrade again.
I've never seen this error before, but whenever I can't get Xcode and React-Native to play well together, I do a couple of things. Check what version of Xcode I'm working with. If it needs to be updated, I update it. Then clearing watchman and the cache are the second place I go. I don't use the reset cache command. It always says that I need to verify the cache, so I skip that (you can do it though, I just get confused). I use rm -rf $TMPDIR/react-* to get rid of any cached builds. If that doesn't work, I try to build the app in Xcode, then work my way from there, to build it with react-native run-ios. With this error message, it seems you might start by trying to build it with Xcode. Hope that helps...let me know your progress with it. Good luck! (Also, you could update to RN 0.51 as another attempt to get your versions synced.)
I had this problem for the longest time and none of the above solutions helped. I was in the middle of upgrading react native in a create-react-native-app project until I found out that not all versions of Expo support the latest React Native.
Found this page linked in the documentation that shows which version combinations of React Native, React, and Expo are officially supported:
Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Editing the app.json and package.json files to match the corresponding versions and running npm install got everything working again.
I am using a physical device, in my case this solved the problem:
Uninstall the app
lsof -i :8081
kill -9 PID
Rebuild the app (react-native run-android or react-native run-ios)
In your build.gradle file add the following
implementation ("com.facebook.react:react-native:0.51.0") {
force = true;
}
replace 0.51.0 with the version in your package.json
Try installing the dependencies again. That worked for me-
1.) yarn/npm install
2.) yarn/npm start --reset-cache
For me it was due to react-native version in dependency section of package.json file. It was:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}
I chaged it to:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}
Now it works fine.
In my case installing a new virtual device helped. Now I am using 1 device per app.
It happens sometimes when you try to run without closing the node server, in which the previous app was running, so try restarting React.To do so, just run the following commands:
1. To kill current processes
killall node -9
2. To Start React Native
react-native start
3. Then Run android
react-native run-android
For my case I'm facing it on iOS, and I've tried to reset and clear all cache using below command but failed too, despite many comments saying that the root cause is there is react packager running somewhere accidentally, I've restarted my mac and the problem still remained.
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache
The solution is, to delete the build folder # /ios/build, then execute react-native run-ios solved it
I have tried the solutions above but adding this to AndroidManifest.xml seems to fix it.
android:usesCleartextTraffic="true"
For others with the same problem on iOS with CocoaPods:
I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn't automatically get upgraded by using react-native-git-upgrade.
The fix is to upgrade all installed pods, by running cd ios && pod install.
Expo users - make sure your app.json sdk version and package.json expo version are (may be equal) compatible to each other.
The fix we did was to make sure the ANDROID_HOME and PATH variables were set up prior to the build.
First, run the below two commands then the build the app for the device.
export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
This is working for me :
react-native start --reset-cache
I also had this issue using Expo and iOS Simulator. What worked for me was erasing the Simulator in Hardware > Erase All Content and Settings...
I have got the same issue while building my react native app for android and I did the following which worked for me.
The "JavaScript version 0.50.1" in the error console is the react-native version in your package.json file. Make sure it is the same version as "Native version 0.50.0" in the error console.
I have Updated the react-native version to the "Native Version 0.50.0" as prompted in the error console.
Rebuild the app react-native run-android.
Possible Fix:
Delete the package-lock.json
Run: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install
If the problem persists, try to execute the project directly from the Xcode
This worked for me.
In my case (NOT using expo & Android build)
package.json
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.2"
}
And app.json
{
"sdkVersion": "27"
}
resolved the issue
I was trying to build and run a React Native app from WebStorm and ran into this problem. The simple solution for me was:
watchman watch-del-all
On macOS, if watchman is not already installed, install it using Homebrew:
brew install watchman
In my case, I changed the expo version manually. I got the same issue because I forgot to update sdkVersion in app.json and babel-preset-expo in package.json
After that run: expo r -c to clear cache and start the app.
This Answer is Published in 2020,
Fix this Error in 3 steps:
First step: I changed the value of expo in package.json file to the latest supported version, according to expo documents(visit here).
Second step: I changed the value of sdkVersion in app.json file to the same value of expo in package.json.( equal number to last step).
Third step : I changed the value of react-native in package.json file to the same value of React Native Version , according to expo documents(visit here).
now your ready to go.
use npm install to install specified version of dependencies and then npm start to run the project
I got this classing when TypeScript type definitions mismatched.
E.G react-native at 0.61.5 in dependencies and #types/react-native at 0.60.0 in devDependencies.
As soon as I updated devDependencies it worked. Didn't have to restart anything.
edit your package.json for your javascript version
"react-native": "^0.50.1",
after run
npm install
For me, who is running with a monorepo, there was a hidden react-native version inside yarn.lock. It was not present in any package.json, but was never deleted.
I removed that particular react-native version from yarn.lock, and did a
yarn install
This cleaned out alot of old stuff and made sure that things was working fine.

Building new release of ngx-charts

I'm attempting to add a personally desired feature for ngx-charts. I got it to work using the standard src directory but, I wanted to build a release version potentially.
Here are the steps to reproduce the issue:
npm i https://github.com/swimlane/ngx-charts/tarball/master --save (this grabs the entire project instead of just the release)
Go into your node_modules/#swimlane/ngx-charts folder and delete the release directory
Rebuild the directory by running npm i && npm run package
Notice how index.d.ts is unable to find any modules even though they're there.
I have noticed that the /common/base-chart.component.d.ts file is never created for some reason causing this problem. But, I cannot for the life of my figure out why. I've tried multiple webpack versions 2-4 but, every attempt results in the same thing.
I believe I am doing something wrong which is why I did not open an issue. I would appreciate any insight into this problem. Thank you for reading!
I would recommend cloning the repository locally rather than installing it from npm:
git clone git#github.com:swimlane/ngx-charts.git
Then install dependencies:
cd ngx-charts
npm install
After that make your changes to the src (you can run the demo app to test while developing with "npm run start")
Then to package:
npm run package
This will build the project and update the release folder

npm - EPERM: operation not permitted on Windows

I ran
npm config set prefix /usr/local
After running that command,
When trying to run any npm commands on Windows OS I keep getting the below.
Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\Git\local'
at Error (native)
Have deleted all files from
C:\Users\<your username>\.config\configstore\
It did not work.
Any suggestion ?
Running this command was my mistake.
npm config set prefix /usr/local
Path /usr/local is not for windows. This command changed the prefix variable at 'C:\Program Files (x86)\Git\local'
To access and make a change to this directory I need to run my cmd as administrator.
So I did:
Run cmd as administrator
Run npm config edit (You will get notepad editor)
Change prefix variable to C:\Users\<User Name>\AppData\Roaming\npm
Then npm start works in a normal console.
This is occurring because windows is not giving permission to the user to create a folder inside system drive. To solve this:
Right Click
The Folder > Properties > Security Tab
Click on Edit to change Permissions > Select the user and give Full Control to that user.
Sometimes, all that's required is to stop the dev server before installing/updating packages.
I solved the problem by changing windows user access for the project folder:
Here is a screenshot:
http://prntscr.com/djdn0g
Restarting VsCode solved it for me!
I recently had the same problem when I upgraded to the new version, the only solution was to do the downgraded
To uninstall:
npm uninstall npm -g
Install the previous version:
npm install npm#5.3 -g
Try update the version in another moment.
I use Windows 10.
I started the CMD as administrator, and it solved the problem.
Find CMD, right click, and click open as administrator.
I had an outdated version of npm. I ran a series of commands to resolve this issue:
npm cache clean --force
Then:
npm install -g npm#latest --force
Then (once again):
npm cache clean --force
And finally was able to run this (installing Angular project) without the errors I was seeing regarding EPERM:
ng new myProject
In my case, I was facing this error because my directory and its file were opened in my editor (VS code) while I was running npm install. I solved the issue by closing my editor and running npm install through the command line.
I had the same problem, after updating npm. Solved it by re-installing latest npm again with:
npm i -g npm
but this time with cmd running in administrating mode.
i did all this because i suspected there was an issue with the update, mostly some missing files.
I had the same problem when I tried to install the npm package AVA. The solution for me was to delete the node_modules folder and force-clean the npm cache:
rm -rf node_modules
npm cache clean --force
I could then install the npm package without a problem.
for me it was an issue of altering existing folders in node_module, so i nuked the whole folder and run npm install again. it works with no errors after that
Just run cmd as admin. delete old node_modules folder and run npm install again.
The Problem I faced (In Windows Computer)
When I was trying to install a couple of npm packages I got the following error:
npm - EPERM: operation not permitted - while npm was trying to rename a file
Here's my debug snippet for reference, if you've faced the similar problem:
After carefully checking out the answers from other users, I have created a detailed answer for the community
My Solution for the problem
Follow the mentioned steps
Right-click on the project folder
Go to properties -> Security Tab
Select Users -> Edit
In the Permission for Users section, Full control -> Give a check mark in Allow -> OK
Wait for Windows security to apply the new security rules
Click OK
Visualization of the steps
If you follow these steps and try to install npm packages again it will work properly.
Note: It's a best practice to close and open up the command line again to experience the changes
Simplest way
Hope I am not too late for this post but recently even I too got hit by this issue. And also I had no admin rights on my laptop.
Here is the simplest way I fixed the bug.
Locate the file name .npmrc (it will be in C:\Users\<user name>\.npmrc)
Open it and change the path of prefix= to prefix=C:\Users\<user name>\AppData\Roaming\npm
hope it will be helpful..
Happened to me since the folder/file was locked by another process. Used a tool (LockHunter) to terminate that process and it started working again (possible reason).
If you getting this error in an IDE's terminal/commands prompt, try delete node_modules, close IDE, and run the npm install command again.
The time when IDE started but still not completed its analysis of node_modules tree is a tricky moment, when packages installation may fail because IDE still scanning node_modules contents.
This error is caused by different problems try the below one of them will work for you!
try to run npm as Administrator
Run cmd as administrator npm config edit (You will get notepad editor)
Change Prefix variable to C:\Users\<User Name>\AppData\Roaming\npm
The errors went after I disabled my anti-virus (Avast)
Sometimes a simple cache clear like the below would fix it.
npm cache clear
For me the problem come from bash terminal. I change my terminal to powershell and it's ok.
Really easy to resolve
Find this command npm cache clean as a solution to those error in quick and simple way!
I updated my node version to 8.9.4 and ran the necessary install command again from administrator command prompt. It worked for me!
A reboot of my laptop and then
npm install
worked for me!
Running npm commands in Windows Powershell solved my issue.
Try npm i -g npm . NPM version 6.9 is work to me.
Apparently anti-virus software can also cause this error. In my case I had Windows Security's Ransomware Protection protecting my user folders which caused this error.
Windows 10,
Running the IDE (in my case IntelliJ) in administrator mode and executing npm install does resolves the problem.
If no IDE then run CMD in administrator mode and try executing npm install
For those trying to update config
If having trouble updating your npm config, try instead running using the -g flag. This solved the issue on Win 10 for me after trying everything else.
npm config edit -g
I am able to update the config and changes are reflected everywhere. This may be due to running npm in an organizational scope.
I was running create-react-app server. Simply stopped the server and everything worked just fine.
The simpler way to solve this by entering the below command
npm config set cache C:\tmp\nodejs\npm-cache --global
At least I just solved my problem in this way:
Search cmd
Then run as administrator
Then npm i -g expo-cli or npm config set prefix /usr/local
I just solved my problem.

Categories

Resources