What is the ideal approach for setting up the react-native CLI - local module or global installation

I've been following the initial steps to start with React Native from FB's git page at https://facebook.github.io/react-native/docs/getting-started

While using nxp or npm installed CLI during the process, I encountered the following error.

[!] Invalid `Podfile` file: [!] /Users/allen/.nvm/versions/node/v12.14.1/bin/node -e console.log(require('@react-native-community/cli').bin);

internal/modules/cjs/loader.js:796
    throw err;
    ^

Error: Cannot find module '@react-native-community/cli'
Require stack:
- /Volumes/BLUE/workspace-blue/react_native-blue/test/ios/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at [eval]:1:13
    at Script.runInThisContext (vm.js:116:20)
    at Object.runInThisContext (vm.js:306:38)
    at Object.<anonymous> ([eval]-wrapper:9:26)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at evalScript (internal/process/execution.js:80:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Volumes/BLUE/workspace-blue/react_native-blue/test/ios/[eval]' ]
}

This issue occurs during cocoapods installation. The documentation states:

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.

However, this problem persists regardless of installations or methods used for creating the initial files.

The Podfile contains these lines:

platform :ios, '13.0' # <- originally set at 9.0 but changed to 13.0
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

If I locally install @react-native-commuinty/cli within the project and then run pod install, everything works correctly. Should I update the CLI path to my npm directory? If the docs suggest no issues when no react-native CLI is installed, why do I need to install it for pod install to work?

Environment:

  • MacOS 10.15

  • node 12.14.1

  • ruby ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19] (attempted with rbenv 2.5)

  • xcode-select version 2373.

Answer №1

Make sure to keep it local. Once you step in

npx react-native init [project name]

it will be added locally.

https://facebook.github.io/react-native/docs/getting-started

this official link suggests:


If you have previously installed a global react-native-cli package, make sure to remove it to avoid unexpected issues.


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

ngMaterial flex layout not functioning properly

I can't seem to figure out why ngMaterial is not laying out my simple hello world app in a row. Despite checking the console for errors, I still can't see what I am doing wrong. I expected the content below to be displayed horizontally instead of ...

Bower, Grunt & zsh: Sorry, that command couldn't be located

After installing Grunt and Bower and switching to ZSH, I encountered an issue. Whenever I try typing bower --help or grunt anything, ZSH gives me the error message zsh: command not found: bower or zsh: command not found: grunt. How can this be resolved? ...

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

I encountered an issue while trying to access a store in Pinia for my Vue web application. Despite installing Pinia and setting app.use(createPinia()), I keep receiving the following error message: Uncaught Error: [ ...

Transform an array of strings into a JSON object or array

Is there a way to transform a JavaScript string array into a JSON string? var arr = "{'id': '10', 'name': 'test1'},{'id': '11', 'name': 'test2'}"; This would allow for easy a ...

What is the best way to manage errors and responses before passing them on to the subscriber when using rxjs lastValueFrom with the pipe operator and take(1

I'm seeking advice on the following code snippet: async getItemById(idParam: string): Promise<any> { return await lastValueFrom<any>(this.http.get('http://localhost:3000/api/item?id=' + idParam).pipe(take(1))) } What is the ...

Techniques for retrieving elements from HTML using jQuery

I'm developing a feature that allows users to add videos to playlists by clicking on a link in a popover. The challenge I'm facing is extracting the video_id and the selected playlist when the user interacts with the popover. Any tips on how to a ...

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

I'm currently facing an issue with my HTML document where the external js file is not loading. Here's a snippet of the HTML: <!DOCTYPE html> <html> <head> <title>...</title> <meta name="viewport" conten ...

Error: The requested collection# cannot be found in the Node.js Express routing system

Recently, I have started learning nodejs and implemented a simple API that allows users to log in with passport and then redirects them to the /collections route. While this part is functioning correctly, I am encountering issues with POST requests which a ...

Prevent users from viewing or editing profiles of other users

I need to enhance the security of my application by restricting users from accessing profiles of other users. route.js router.get('/currentUser/:username', userAuth, (req, res) => { User.findOne({ username: req.params.username }).the ...

Passing object attributes to a modal in AngularJS

I am trying to figure out how to pass a complete object to my modal so that I can view all of its attributes there. Currently, the items I have look like this: $scope.items = [{ Title: title, Id: id }] On my html page, I am using 'ng-repeat' as ...

Experience the power of CanJS Observable data objects with the added feature of

When working with canJS Observable, I encountered an issue where I cannot use dots in object keys because canJS interprets them as nesting. For example, if I try to create a new observable like this: var obs = new can.Observe( { "div.test-class": { "color ...

Using Python and Selenium to manipulate the webpage and execute JavaScript can help reconstruct the true HTML structure

I have a very basic Selenium code snippet that I am running: <input name="X" id="unique" value="" type="text"> <script> document.getElementById("unique").value="123"; </script> While I can retrieve the input value "123" using driv ...

React is experiencing an excessive amount of rerenders

When incorporating these lines of code below the useEffect function in my React component, I encountered too many re-renders. React has a limit on the number of renders to prevent an infinite loop. if(fields){ setFormFields({ company: !loading ...

Switching visual representation that appears upon clicking the dropdown menu

Issue with Duplicating Dropdown and Image Change const image = document.querySelector('.item__img'); const checkbox = document.querySelectorAll('.imgOption'); function handleChange() { let imgsrc = this.getAttribute("data-value ...

ngSanitize continues to present plain text rather than rendering HTML code

When working with AngularJS scope, I encountered the need to display certain items as HTML. After some research, I realized that integrating ngSanitize was necessary for this functionality. Here is how I implemented it in my app: <script src="Scripts/a ...

Why is my "webpack" version "^5.70.0" having trouble processing jpg files?

Having trouble loading a jpg file on the Homepage of my app: import cad from './CAD/untitled.106.jpg' Encountering this error message repeatedly: assets by status 2 MiB [cached] 1 asset cached modules 2.41 MiB (javascript) 937 bytes (rjavascript ...

How to modify a single entry in a MongoDB database with the help of Node.js and

How do I update a specific record by _id in a MongoDB collection? A recent UPDATE: After making some changes to the code, I now encounter a 500 internal server error. Any suggestions on resolving this issue would be greatly appreciated. "_id ...

Sorting a Javascript table performs effectively, however, the results may vary when iterating through all the indexes

I'm currently using a function to sort a table I have: function ReorderSupplyGP(table){ table.find('tr:not(.kn-table_summary)').sort(function (a, b) { var tda = $(a).find('td:eq(1)').text().trim(); var tdb = $(b).find(&a ...

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

Discovering the position of elements in relation to their (grand^N)parent

Among my possessions are elements A and B. B has the ability to exist as a direct child of A, or there may be anywhere from 0 to N elements separating them. It is imperative that I determine how B is situated in relation to A, specifically noting the dist ...