Encountering an issue while trying to initiate a fresh React Native Project

As I work through the setup steps outlined in the React Native Documentation on my M1 MacBook Pro, I encounter a stumbling block. Despite successfully running React projects and Expo projects on this machine before, I hit a snag when trying to create a new React Native project using the 'Create A New Application' section's command: 

npx react-native init AwesomeProject
. The Terminal outputted error messages:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5220373331267f3c33263b243712627c64647c66">[email protected]</a>
npm ERR! node_modules/react-native
npm ERR!   peer react-native@"*" from @react-native-community/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1477787d54223a273a25">[email protected]</a>
npm ERR!   node_modules/@react-native-community/cli
npm ERR!     @react-native-community/cli@"^6.0.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="344651555740195a55405d425174041a02021a00">[email protected]</a>
npm ERR!   react-native@"0.69.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! react-native@"0.69.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a687f7b796e5a2b22342a342a">[email protected]</a>
npm ERR! node_modules/react
npm ERR!   peer react@"18.0.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b7c787a6d3477786d706f7c5929372f20372b">[email protected]</a>
npm ERR!   node_modules/react-native
npm ERR!     react-native@"0.69.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Frustrated by the failed attempt to install the new project, I search for guidance on uninstalling and reinstalling React Native but come up empty-handed. How do I completely remove the existing version of react-native ([email protected] according to the error message) and install the latest version of RN?

javascriptnode.jsreact-nativenpx

Answer №1

For users on Mac with node version 18, which is the latest but not the most stable, it is recommended to download version 16 for a smoother experience.

Step-1

brew uninstall node; 
# or `brew uninstall --force node` to remove all versions
brew cleanup;
rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.d;
rm -rf ~/.npm;

Step 2 - Download and install the stable version from the official Node.js website.

Step 3 - Verify that you are now using version 16 of Node.js before attempting to create a React Native project again. Please update us on your progress. Good luck!

Answer №2

Aside from the solution provided in the answer, you have the option to use brew install node@16 for installing that specific version without having to download the binary manually.

Answer №3

In case node version 16 installation fails, make sure to update npm by executing sudo npm update -g.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing data back from an asynchronous function to its parent function in Node.js

Exploring the world of asynchronous programming is a new adventure for me as I delve into implementing Twilio video calls through Node.js. I've been grappling with calling a server-side function that in turn invokes another asynchronous function retu ...

javascriptjquerynode.jsasynchronoustwilio

Click event to focus on AngularJS TinyMCE textarea

My current project utilizes the tinymce text editor in combination with the angularJS framework. I obtained the directive from here and successfully integrated the editor using the provided example on GitHub! Initially, everything was working smoothly wit ...

javascriptangularjsangularjs-directivetinymce

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code: public static getKeys(obj: Object) { let keys: string[] = []; for (let k in obj) { if (typeof obj[k] == "Object" && obj[k] !== null) { ...

javascriptjsonrecursiontypescriptjavascript-objects

Steps to installing Bower on CentOS 7

After successfully installing nodejs on my CentOS 7 system, I decided to proceed with installing bower. For those who are looking to install nodejs, here are the steps I followed: Download Node.js v0.10.30 tar.gz file Extract the downloaded file using ta ...

linuxnode.jsnpmbowerbower-install

JavaScript constructor functions may trigger ReSharper warnings for naming convention

When it comes to JavaScript coding, I personally prefer using PascalCase for constructor functions and camelCase for other functions. It seems like my ReSharper settings are aligned with this convention. However, when I write code like the following: func ...

javascriptnaming-conventionsresharper

Need to end all Node.js instances to properly reflect the code. Any solutions for resolving this issue?

After developing an application using typescript, hapi, and nodejs, I encountered a strange issue. Whenever I save, remove, or add new code, the changes are not reflected even after running gulp build. The only way to get it working is by closing all run ...

node.jstypescriptgulp

The Node.js Express server seems to be having trouble accessing static files

After successfully starting the express server, I encountered an issue when trying to load static files which resulted in an error message reading "Cannot GET /URL". The static files are located within a folder named "Login" and both the app.js and "Logi ...

javascriptnode.jsexpress

Tips for retrieving the chosen value from an ajax.net ComboBox using javascript

Is there a way to extract the selected value from an ajax.net combobox using JavaScript for client-side validation? What would be the most effective method to achieve this? Thank you. This is how I managed to obtain the value: var combo = $get('ddl ...

javascriptcomboboxajax.net

Despite encountering multiple failures with my Ajax POST request using Express and Plivo, I continue to receive duplicate SMS notifications on my phone

I am currently working with Express, React, Ajax, and Plivo. My issue involves an ajax POST request that I have set up to send data (user phone number and text message) from the client to my express server. While the text message is successfully delivered ...

ajaxnode.jsexpressreactjsplivo

Error encountered when attempting to upload large files using node.js and multer on an nginx server deployed on Elastic Beanstalk: ERR_CONNECTION_RESET

Every time I attempt to upload large files (specifically zipped files that are 100mb or more), I consistently receive timeout errors with the code ERR_CONNECTION_RESET. My setup involves using multer with node.js on the backend, while the frontend is built ...

node.jsnginxfile-uploadmulterconnection-reset

modify the tr element within a jQuery context

I am attempting to convert a "yes" to a select dropdown that allows users to choose between yes and no. The HTML structure is as follows: <tr> <td>text</td> <td>no (needs to be changed via JS)</td> <td><a href="#"&g ...

javascriptjqueryhtmljquery-selectors

Click-o-Meter: Tracking Button Presses

I’m looking to develop a button click counter that increases every time it is downloaded. I want to implement this functionality without using a database. Here's the code snippet: <?php $counterFile = 'path/to/counter.txt' ; ...

javascriptphpjqueryajax

PhoneGap has been encountering issues during installation and is malfunctioning

Upon the completion of NodeJs installation and running npm install -g phonegap, I encountered an output that deviated significantly from the expected format: C:\Program Files\nodejs>npm install -g phonegap | > <a href="/cdn-cgi/l/emai ...

androideclipsenode.jscordovanpm

Determining the visible dimensions of an iframe

Is there a way to determine the visual size inside an iframe using JavaScript or jQuery? In this scenario, only a portion of the iframe is displayed. The iframe itself has dimensions of 300x300, but it is being limited by a div to 300x100. <div style= ...

javascriptjqueryhtmlcss

"Enhance your web application with dynamic drop-down selection using Spring, Ajax

In my JSP file, I have a script that populates the list of states based on the selected country. The script fetches data from the controller and is supposed to display the list of states. However, after calling the controller method, the alert "received da ...

javascriptajaxjsonspringjackson

Get the contents inside the window.open using Javascript

First and foremost, I want to acknowledge that I understand the likelihood of this failing due to cross-domain restrictions - just seeking confirmation on that. Here's my approach: I have a window that I open using JavaScript. Subsequently, I make an ...

phpjavascriptajaxcross-domain

tsc does not support the use of the '--init' command option

Encountering an error when running npx tsc --init: $ npx tsc --init npx: installed 1 in 1.467s error TS5023: Unknown compiler option 'init'. I've added the typescript package using Yarn 2: $ yarn add -D typescript ➤ YN0000: ┌ Resolution ...

node.jstypescriptyarnpkgtsc

Display the content of a Vue file directly on the webpage

I am currently developing a website to showcase UI components using plain CSS. The project is built with Vue, utilizing standard HTML and CSS. One of the key features I am working on is providing users with two views for each component: 'Preview' ...

javascriptvue.js

Combining both AJAX variables and HTML classes

Having trouble combining two AJAX variables with JQuery and PHP to add to a MySQL database... Here is the code snippet: $.ajax({ url: DIR+"some.php", method: "POST", dataType: "JSON", data: { mobile: mobile.val(), d ...

javascriptphpjquerymysqlajax