I am unable to create a new React Native project via react-native init <ProjectName>.
This is the first time I've tried since upgrading to macOS Sierra, but I don't know if that's related.
If I run the command with the --verbose flag, it runs through all the npm packages, but then eventually outputs the following:
├── UNMET PEER DEPENDENCY react#~15.3.1
<List of other packages including react-native 0.34.1>
npm WARN react-native#0.34.1 requires a peer of react#~15.3.1 but none was installed.
npm verb
npm verb If you need help, you may report this error at:
npm verb <https://github.com/npm/npm/issues>
npm verb exit [ 0, true ]
npm info ok
It then just sits there indefinitely. Last time I created a react native project it would take maybe 20-30 seconds max, but now it never completes (after say 10-15 minutes).
If I kill the process, all I have is a package.json with just the following in:
{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react-native": "0.34.1"
}
}
...and the node_modules folder containig react-native and its dependencies. None of the required XCode/Android folders are there, or the index entry points, configs etc.
I have tried reinstalling all the required dependencies (node, homebrew) and I have also reinstalled git via homebrew.
I've seen other threads that suggest manually installing React, but I don't buy it. This used to work and React used to get installed as part of the process, but now I get this warning and it's game over.
Anyone else seen this issue?
EDIT
I just tried this on my other Mac, also running macOS Sierra and it worked fine. I followed the same steps on that to ensure all my dependencies were up to date first. I did a verbose init and still got the warning about React 15.3.1 being missing, but it then carried on and install Reacrt 15.3.2 and then set up all the XCode/Android project files.
Very odd/annoying as I really need to start putting something together on this Mac.
SECOND EDIT
If I create a new user account on my Mac and log in as that, I can create a project, so it seems to be user-specific. Although annoying, I don't mind setting a new account up, but before I do would like to see if anyone can offer any suggestions. Thanks.
So the issue turned about to be watchman, as outlined here: https://github.com/facebook/react-native/issues/9943
If I ran watchman version the terminal hung, so as per the instructions I did:
rm -rf /usr/local/var/run/watchman/ && brew uninstall watchman && brew install watchman
...and it worked a treat!
Related
Ocassionally, when installing an (unrelated) dependency, I lose the resolved values from each of my private nexus repository dependencies, meaning that when my build server runs npm ci it falls back to attempting to install these from the npm repository, which obviously fails.
I am using npm 8.5.5/node 16.15
I am using NPM's workspaces feature to construct a monorepo, meaning that I have several project package.json files as well as a root package.json
My .npmrc (at root level) looks like this:
engine-strict=true
#foo:registry=http://prod-nexus.foo.com/repository/bar/
always-auth=true
After an (unrelated, random) install my package-lock.json will have this change:
"#foo": {
"version": "1.2.3",
- "resolved": "http://prod-nexus.foo.com/repository/bar/#foo/-/lib-1.2.3.tgz,
- "integrity": "sha...",
+ "license": "MIT",
"dependencies": { ....
Note that the resolved and integrity fields have disappeared and the license has been added.
I have run into this problem several times, each time I have solved it by rolling back and some manual editing and eventually it goes away, but I really need to understand what is going on.
What is causing this, why is it random, what can I do to defend against it?
This could be related to the issue https://github.com/npm/cli/issues/4263
clean the npm cache npm cache clean -f
run npm install again
If that doesn't work, try it again while deleting more:
clean the npm cache npm cache clean -f
remove node_modules in project folder
remove package-lock.json file
run npm install again
I just got a Mac Mini M1 for personal use, and I'm trying to run a preexisting React app. I installed nodejs and npm successfully, and running npm install does add the node_modules folder correctly as far as I can tell; but whenever I run npm start or npm run <script>, I get an error. It seems that npm can't access any of the project's dependencies. I've tried this using the rosetta terminal as well with the same results.
For an example, I initialized a new React project with npx create-react-app test_app, then cded into it and ran npm start. I got:
test_repo#0.1.0 start
> react-scripts start
sh: react-scripts: command not found
How do I get these commands to run properly and launch the app?
Here's what I'm using for node and npm:
➜ test_repo npm -v
7.6.0
➜ test_repo node -v
v15.11.0
I found a (very) hacky solution for now. I'm no expert with npm, but what I discovered is that npm scripts refer to dependencies indirectly - for example, having a command that says
"test": "jest"
tells npm to look in node_modules/.bin for a file called jest and to run that.
the issue is something to do with npm understanding this. But it's possible to get around that by putting the address of each dependency in the script, for example:
"test" "node_modules/.bin/jest"
I was able to get things to build this way. If someone comes along with a better answer, please show me up :P
For some reason when I want to start my React Native project, it's stucks at 'Starting Packager...' part. I tried to delete the node packages, and reinstall them, intall them via yarn, npm, but no luck. I got no idea how should I fix this :/ (so awkward)
I had the same issue. I solved it by changing react-native-scripts version from "^1.14.1" to "1.14.0" and run npm install again.
after a long search I found a solution for this problem:
this problem is caused by another watchman process, to solve it you have to turn off the watchman process
first,check react,react-native,and expo version are they compatible, goto here
Then you must install watchman, goto https://facebook.github.io/watchman/docs/install.html.
Check watchman has installed by:
watchman -v
result:
4.9.4
After that, type in terminal or cmd:
watchman watch-del-all
result:
{
"version": "4.9.4",
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
}
look in the "roots" section:
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
if "roots" not empty, you must shutdown watchman process, typing this in terminal or cmd:
watchman shutdown-server
result:
{
"version": "4.9.4",
"shutdown-server": true
}
run again watchman watch-del-all
you will get result with empty roots like this:
{
"version": "4.9.4",
"roots": []
}
after that you can run npm start or yarn start or other command to start your react-native project.
if the problem still occurs, repeat the above method several times, make sure the "roots" are empty! in my case, even I had to repeat it up to 3 times.
There could be multiple reasons for the issue. For the most recent version of react-native (Aug 2018), what you might need to do is just press 'q', it will displays the QR code.
After that, you use the expo app scan the QR code, it should start to bundle the scripts and load it to your phone.
If not, you might have another issue which is caused by the incompatibility among React-Native, React and Expo. If you are using Expo 27, you should use reactive-native 0.55.
There is a complete matrix here, https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Anyone who face problem after running
npm audit fix, that is because it will try to install react-native 0.56 which doesn't work with Expo 27 well. So don't run npm audit fix. Just run npm install react-native#0.55.0. (As time progress, the version might be different. Make sure you follow the link above to find out the compatible versions.)
There's a fastest way that worked for me:
When it says "Starting packager..."
press the "q" key. To show QR code
In my case (React Native 0.62.2) however, yarn ios equivalent to react-native run-ios was stuck (silently) as the dedicated port (8081) was reserved by previously running process.
I only found that out when I tried running yarn startequivalent to react-native start
I had to kill it kill -9 $(lsof -t -i:8081 -sTCP:LISTEN) and run yarn ios to get ios simulator back and running.
Every case is different and I Hope this helps someone.
I just updated my react native project to version 0.45
and when using this command : react-native run-ios on the root of this project
I am getting this error :
Cannot find entry file index.ios.js in any of the roots ....
and i can see that the server is trying to look for JS files in
Looking for JS files in
/Users/someUser/Code/ReactTest/node_modules/react-native/packager
when using this command : npm run start -- --root .
i can see that the server is looking for js file in the correct location
Looking for JS files in
/Users/someUser/Code/ReactTest
and every thing is working from here
why the react-native run-ios is try to look in the wrong location ?
I ran into this issue today. As noted here it has been corrected as of version 0.45.1, but this turned out to be a red herring for me.
The most telling problem in my case was that index.ios.js didn't actually exist anywhere in my project, only in some places in node_modules. It turns out that, because I'd initialised the project with the create-react-native-app command, I had to:
npm run eject
You can read more about the eject command here.
If you still have issues, try the below.
Check your dependency versions. Here are my RN packages:
"react": "16.0.0-alpha.12"
"react-test-renderer": "16.0.0-alpha.12"
"react-native": "^0.45.1"
Update your dependency managers. These worked for me:
$ yarn --version
0.18.1
$ npm --version
4.6.1
Clean your cache(s). WARNING - CONTAINS rm -rf, COPY WITH CARE.
watchman watch-del-all
rm -rf ./node_modules
yarn cache clean
rm -rf $TMPDIR/react-*
yarn install
npm start -- --reset-cache
After that last npm start, hit CTRL+C and ensure there are no dormant npm processes running in the background. Then, try react-native run-ios again.
The react-native launched new release 0.45 a few days back. So, the commands to create a react-native application and running locally have many differences.
npm install -g create-react-native-app
Then run the following commands to create a new React Native project called "AwesomeProject":
the new way of creating a react-native application as follows
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
Please follow the official documentation for creating an application and running the application on locally. hope the below link will help you.
https://facebook.github.io/react-native/docs/getting-started.html
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios(macOS only).
Enjoy, Happy coding :)
I am just getting myself familiar with command line tools like npm. I've been searching around for the answer but was not able to find a clear one.
What I am trying to do is to install materialize-css package into my test package, as well as its devDependencies, like "autoprefixer". This is materializeCSS's package.json file.
Here's what I do:
Under my newly created and blank folder "testProject", I use npm init to create a package.json file for my test package:
{
"name": "create_project",
"version": "1.0.0",
"description": "Setting up a project",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "shenk wen",
"license": "MIT"
}
Then, I do
npm install materialize-css
I was expecting the above command would install all the dependencies and devDependencies of materialize-css, but only the dependencies is being installed. I read this question and the accepted answer suggests adding --dev to the command. But that seems not the answer I am looking for because --dev would only make materialize-css a devDependency of my test package, but not installing its own devDependencies. The other answers are not so straightforward. Is there any parameter I can use to achieve this? Or do I have to change the env_variable which I don't know how to?
In older npm versions, 'npm install --dev' installed all devDependencies of all your dependencies. This also used to work in a recursive fashion, so you end up downloading also devDependencies of devDependencies of your dependencies and so on. This resulted in enormously long install time / download size.
Also, the purpose of the feature is questionable: Why should you care about devDeps of your deps? For these reasons --dev was removed from npm:
https://github.com/npm/npm/issues/5554
Current behavior for 'npm install' is: install all deps and devDeps for the 'main' package (the one you 'npm install'-ed in the first place), but when recursing, install only deps (and no devDeps).
If you want to install & save the dependency to your package.json, you should use --save or --save-dev, I don't think --dev does this.
If you want the devDependencies of a module you've installed as a dependency to your project, you almost certainly want to git clone that module's repo or fork it instead. When you run npm install in your cloned repo, that will also install all of the module's devDependencies.
(I'm not a developer by trade and my npm-fu was a bit rusty, so I confused myself about what I was trying to do. Tomas Kulich's question "Why should you care about devDeps of your deps?" helped me realize the error of my ways.)