eslint with yarn and create-react-native-app - react-native

Has anyone made eslint work with create-react-native-app in vscode on Windows 10? It is so unstable it's making my skin itch!
Latest npm doesn't work with create-react-native-app so I installed yarn. Now I can create an app. But I have to do this with cmd prompt outside of vscode otherwise I get no QR code to launch app on my phone.
I tried to install eslint locally with yarn, and use airbnb linting rules - this fails - if I install it with npm it works and I can initialise it with airbnb rules. Yay! I now have linting in my project.....but wait! Now I cannot start my project anymore because:
react-native-scripts start
'react-native-scripts' is not recognized as an internal or external command,
operable program or batch file.
This is killing me!! It's taken about 8 hours of $%^#ing around and I haven't even got to try any react native coding yet! Is it supposed to be this insane just to set up the environment?!!?
Anyone have any suggestions? I googled and looked at github issues but I see no solutions for this.
Thanks in advance!

Version 1.5.2 of create-react-app has options for using npm instead of Yarn as well as using a specific npm version. Use create-react-app -h to view help.
Have you also tried adding the following to your VS Code settings when using Yarn?
"eslint.packageManager": "yarn"

Related

Why can't I install the React Native Testing library?

I'm new to app testing and have started delving into this topic since yesterday. I wanted to write tests for my React Native app and tried to install React Native Testing Library with this command:
npm install --save-dev #testing-library/react-native #testing-library/jest-native
Then I ran into the following problem:
I tried to find a solution to this problem in Google, but I did not succeed. As far as I understand, the problem lies in the dependencies?
Please tell me what can I do in this case?
P.S. I tried to create a completely clean project with expo init, tried to install the library but got exactly the same error
Hit the same issue and didn't want to update everything at the moment so I solved the issue by running a suggestion on the npm error output:
npm install --save-dev #testing-library/react-native --legacy-peer-deps
It worked for me
it looks like you are running into a conflict with your react version dependencies. Please check the named modules for required packages they depend on.
Please have a look with: npm outdated and then maybe try to update your settings via npm update
also take a look here if you want: updating npm dependencies
you need to update react version after updating just install the latest version of testing-library

Error: option 'name' clashes with existing property 'name' on Command

Some context: I've recently been trying to update a react native project that uses expo, since I have not worked on the project for about four months. I believe I finally was able to successfully upgrade the project as expo is starting. The issue is that I am now having some trouble with some of the newer modules I just installed with npm. This error seems to be coming from me not knowing how to use the commander module. Additionally, I do not believe that I have a thorough understanding of modulues in react native/expo. I am using ubuntu 20.04 via windows terminal.
Error:
I did go to the website mentioned in the error. I believe that this link - https://github.com/tj/commander.js#avoiding-option-name-clashes - is what will solve my problem. However, I am confused as to where I should put the example file and how to use it.
I am not very well versed in modules for react native/expo and it is quite possible that I do not need to use this module (I thought that installing it would make my react native program run, but that does not seem to be the case).
Thus, I am looking for advice on either how to use this module, or on whether or not I should be using these modules (after updating node and then expo, the following modules could not be found every time I ran npm start, so I decided to install them using sudo npm install module_name -g since some other stackoverflow/github pages recommended that):
fs-extra
terminal-link
chalk
getenv
commander
#expo/xdl
Any help would be appreciated, and I would be happy to provide any more information that would be relevant.
I was not able to figure out a way to make the project work with the above modules. So, I followed the advice of a post I made on the expo forums (I posted similar context there and also the answer that I wrote below).
If you do not want to click the link, here are the steps below:
Basically, I uninstalled expo using the following command: npm -g uninstall expo-cli --save && yarn global remove expo-cli. Then I proceeded to remove the .expo folder from my home directory. More details on these two steps can be found here.
After that, I reinstalled expo using npm install --global expo-cli, from the expo documentation, in the install section.
Then I closed my terminal, reopened it, and ran expo whoami. The command returned recommending an update, so I followed the provided update command (which I believe was just npm install --global expo-cli again).
I closed the terminal, reopened it, and ran expo whoami again. This time I was just met with "you are not logged into expo" (or something along those lines). So, everything seemed up to date.
I then went to project and ran npm start and it worked fine.
Note: You may need to use sudo for any uninstall and install commands above (your terminal will likely tell you if you do).
Note Clearing cache for npm and yarn may take some time. Additionally, the first time you run npm start may also take some time. I'd say all in all this took about two to three hours, but my computer is also not the best.

Getting error while creating a new Project

I'm new to reactnative. I have followed steps to install reactnative properly but, while creating a new project, I'm getting an error. I'm using Windows 7 64 bit with i3 processor.
c:\ReactNativeProjects>react-native init AwesomeProject
Command npm install --save --save-exact react-native failed.
My Folder contains only one file
Since you are starting to use React Native, consider using Expo, I've used it and it makes developing, debugging, testing and deploying to the apple store and google play easier.
According to the official docs:
Expo is the easiest way to start building a new React Native
application. It allows you to start a project without installing or
configuring any tools to build native code - no Xcode or Android
Studio installation required (see Caveats).
Assuming that you have Node installed, you can use npm to install the
Expo CLI command line utility:
npm install -g expo-cli
Then run the following commands to create a
new React Native project called "AwesomeProject":
expo init AwesomeProject
cd AwesomeProject
npm start
This will start a development server for
you.
I've answered a question in SO for the steps and what happens when you build your .apk and .ipa files using Expo, have a look at that as well.
These are my steps to get rid of this error:
Please upgrade your npm
npm install -g npm#latest
Run npm cache clean command in Command prompt ( With some element of doubt for cache presence)
3.Ran react-native init in command prompt as Administrator (on Windows OS), hoping works well with sudo react-native init on Mac OS
If still problem persist make sure that you have followed each and every step mentioned in Documentation i.e. installed JDK, PYTHON, NODE.
Refer to this link For windows

react native doesn't recognize project

I've made a fresh clone of a react-native project which is 100% ok and working. Installed react-native-cli, trying to run react-native start in the project dir, but I get Command start unrecognized. Make sure that you have run npm install and that you are inside a react-native project.
I tried to init a fresh project just to test, and it worked fine, I was able to run react native commands there and everything worked.
It's definitely not an issue with my project because other people work on it as well and it's 100% ok and valid. This is some issue with react native or some other lib, I suppose. What could that be?
I'm using mac os sierra and project's react native version is 0.40.0
So, I've resolved this issue finally, and, to whoever it may concern: the problem wasn't with react-native. The problem was with npm. I was using yarn, and had npm 5 installed on my system. Also I had a postinstall script, which called rn-nodeify. rn-nodeify, in turn, on the final stage called npm (not yarn), and since it was npm 5 I was experiencing an npm 5 bug, which wiped out my modules. The bug is described e.g. here. Downgrading to npm 4 solved this issue for me.

'react-native' is not recognized as an internal or external command, operable program or batch file

I recently started with react-native. I install it using the tutorial on the Facebook site and everything works well for a day or two until this message comes up:
'react-native' is not recognized as an internal or external command,
operable program or batch file.
Nothing works except uninstalling everything and starting all over again. The environments are ok and work (npm, choco, etc.). I have also tried removing and adding react-native to environment variables, restarting, and running cmd in administrator mode, but nothing so far. I should add that I use windows 10 64-bit.
I had the same issue and tried the following but didnt work
Adding npm path to my Environment variables; both system and user
Re install npm and react-native-cli
Both didn't work for me, im using Windows 10;
Solution that worked for me is to install react-native-cli globally
You can install it globally by using the below command:
npm install -g react-native-cli
You can simply use npx react-native <command> it will work
npm install -g react-native-cli
But dont forget to restart command promprt
Your system or user environment PATH variable was edited, you can uninstall NodeJs and install it again or add the below path to the end of PATH variable into user variables the restart the Windows :
C:\Users\[USER-NAME]\AppData\Roaming\npm
this should work.
You need to setup the npm path in your environment variables. Please look at the images down below
Then follow the command : for installing -g ( global ) for cli in your system
npm install -g react-native-cli
I get the same error right off the bat on Windows 10 running in cmd window in adminstrator mode, however there is also a bash shell version of react-native that worked for me in a git bash window.
cmd:----------------------------------------------
C:\Users\David\Documents\react>where react-native
C:\Users\David\AppData\Roaming\npm\react-native
C:\Users\David\AppData\Roaming\npm\react-native.cmd
C:\Users\David\Documents\react>react-native init AwesomeProject
'react-native' is not recognized as an internal or external command,
operable program or batch file.
git bash:----------------------------------------
David#CYBER-PC ~/Documents/react
$ react-native init AwesomeProject
This will walk you through creating a new React Native project in c:\Users\David\Documents\react\AwesomeProject
Installing react-native package from npm...
Setting up new React Native app in c:\Users\David\Documents\react\AwesomeProject
AwesomeProject#0.0.1 c:\Users\David\Documents\react\AwesomeProject`-- react#15.3.1
To run your app on iOS:
cd c:\Users\David\Documents\react\AwesomeProject
react-native run-ios
- or -
Open c:\Users\David\Documents\react\AwesomeProject\ios\AwesomeProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd c:\Users\David\Documents\react\AwesomeProject
react-native run-android
npm install -g react-native-cli
I had to add the %APPDATA%\npm folder to my PATH on Windows 10. Global modules are installed there.
If uninstalling and installing again the npm did not work on you, try adding %APPDATA%\npm to path (Environment variables) then quick reboot/restart. System Reboot should really be part of the process. This worked on my end.
Install :
npm install -g react-native-cli
Uninstall :
npm uninstall -g react-native-cli
If you are following the getting started guide for Windows/Android, they recommend installing nodejs via Chocolatey. But Chocolatey likes to have administrator rights when it installs things. If you're just a regular user, this seems to interfere with how npm installs react-native-cli. In my case, the react-native command was only recognized when I launched a command prompt as admin.
What I did to fix:
launched command prompt as admin
uninstalled react-native-cli globally: npm uninstall -g react-native-cli
uninstalled nodejs via Chocolatey: choco uninstall nodejs
Now, as a regular user without admin rights:
installed nodejs via the nodejs website (not Chocolatey)
installed react-native-cli globally: npm install -g react-native-cli
I uninstalled node.js and then reinstalled it, and it worked like a charm
just uninstall the node.js and reinstall it..
then install the cli package typing command
npm install -g react-native-cli..
now you are ready to make your project.
To make project open a folder from your drive wherever your folder is located.
Then type command
react-native init albums
it will create a project for you inside your directory.
None of the above mentioned solutions worked for me. What did work was to remove nodejs, and reinstall it via Chocolatey with the following command:
PS > choco install -y nodejs.install python2 jdk8
> npm install -g react-native-cli
C:\Users\user\AppData\Roaming\npm\react-native ->
C:\Users\user\AppData\Roaming\npm\node_modules\react-native-cli\index.js
+ react-native-cli#2.0.1
added 41 packages from 15 contributors in 4.528s
I had this problem also becuase I restored my files from a previous OS installation. My problem was a wrong prefix in my C:\Users\user_name\.npmrc file.
Run npm config list and make sure that all your npm config variables are leading to the correct file paths. Delete the .npmrc file if you want have it to go back to the defaults. That's what I did and react-native command is working for me again.
I hope this helps.
i have no clear idea but below steps worked for me.
delete Node Modules
Uninstall react-native cli. This is Recommended in the react-native Documentation
"If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues."
npm uninstall -g react-native-cli
clean gradlew. in your project folder, go to the android folder by typing cd android
and run gradlew clean
move back to your project folder cd .., then run
npx react-native run-android
these steps worked for me. took some time when running first time.
use node.js stable version or recommended version.
On window 10, nodejs>11 global node libraries seems to be installed in C:\Users\your_user_name.npm-global. So you need to set the variable to point to that path
I had problems because of this strange mistake.
I checked to see if it was globally loaded again
I didn't delete all packages
I even deleted C:\Users[USER-NAME]\AppData\Roaming\ npm manually, but there was no solution.
The only thing that is the solution is to use the current version of node.js.
uninstall nodejs completely(restart your pc) and reinstall it using chocolatey and follow other commands from https://facebook.github.io/react-native/docs/getting-started.
worked perfectly fine for me!
Even if you have installed react-native globally and still get the same try adding path of npm module (C:\Users\your user name\AppData\Roaming\npm) to system variables instead of user variables.
I know it's too late, anyway
Make sure you've added the path of the NPM in system variable rather than user variable in the System Environment Variables.
PATH : C:\Users\user_name\AppData\Roaming\npm
Open a the command prompt and type: npm config list:
Get the path underlined in red and add it your system path (change two back slashes into one), for example: C:\Users\YOURNAME\AppData\Roaming\npm.
This solved the issue for me
I just wrote "react-native -v" to console to check have I still react-native and then just I wrote "react-native run-android" again and this time it worked. Yes just that. React native is terrible technology.
Looks like I have uninstalled react native cli by mistake, I tried all answers mentioned above, but the below command worked for me.
npx react-native run-android.
Solution
I was facing 'react-native' is not recognized as an internal or external command,operable program or batch file error when I was running react-native start in VsCode.
I Solved it by running npm install -g react-native-cli in PowerShell
Steps to follow
run PowerShell as admin (important step)
run running npm install -g react-native-cli in PowerShell
close VsCode and rerun it
that's all!
I solve this problem by running
npm install -g react-native-cli
then another error appears
Command run-android unrecognized.
I fixed this error by
npm install
Use npx before your command
npx react-native
Not just
react-native
if you faced the same issue as me just type :
npm i react-native
then try to create a new project as its recommended by the react native doc by typing :
npx react-native init yourProjectName
this should resolve your problem
hope this was helpful