Error encountered in React Native packager due to naming conflict between "lodash" and "yeoman-generator" libraries

Issue Description

Within my current project, I am utilizing "react-native": "0.36.0" along with the following dependencies:

  • "lodash": "^4.15.0"
  • "yeoman-generator": "^0.24.1"

Upon using versions above "^3.10.1" for "lodash" and "0.21.2" for "yeoman-generator", there were conflicts in names like "lodash", "inquirer", and "cli-width" when running packager.

Steps to Reproduce

To replicate this issue, ensure you have the mentioned dependencies and execute: react-native start --reset-cache

Expected Result:

jest-haste-map: @providesModule naming collision:
Duplicate module name: inquirer
  Paths: /CoolProject/node_modules/react-native/node_modules/yeoman-generator/node_modules/inquirer/package.json collides with /CoolProject/node_modules/react-native/node_modules/inquirer/package.json
...
This warning is caused by a @providesModule declaration with the same name across two different files.

Possible Solutions

One possible workaround is to maintain the same versions of "lodash" and "yeoman-generator" as indicated in the 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f7d6a6e6c7b22616e7b66796a">[email protected]</a>
(i.e. "^3.10.1" for "lodash" and "0.21.2" for "yeoman-generator"). However, modifying these versions may not be feasible at the moment due to dependency relationships. Are there any alternative solutions available?

Thank you!

Updates

For further information regarding this issue, refer to the GitHub issue I filed under the react-native repository: https://github.com/facebook/react-native/issues/11200

Additional Update

After upgrading react-native to version 0.39, the problem was resolved. The fix seems to involve removing the seemingly redundant (and potentially outdated) yeoman-generator dependency: https://github.com/facebook/react-native/commit/1fd7a574ba538d05da4be841c84a70766464ec13

javascriptnpmreact-nativejestjsreact-native-cli

Answer №1

When transitioning from using npm to yarn for module installation or setting up projects in React Native, you may encounter this issue. Simply running a npm install can often resolve the problem without causing any harm to your project's setup.

Running npm install will alert you if any of your modules are deprecated or configured with a different version than those required by React Native, and it will take the necessary steps to address these issues. Additionally, pay attention to any npm WARN gentlyRm warnings indicating packages that have been set aside but not removed if you want to thoroughly clean up your configuration.

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

Using seleniumjs to ensure that the element is ready for user input before proceeding

Currently, my application is in a state where it needs to wait for an iframe using the isElementPresent method before switching to it. The issue arises when I encounter trouble within the iFrame itself. I need to ensure that an input component within the ...

javascriptselenium

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Combining Repetitive Elements in an Array

Trying to combine an array of products with the same order_id while also including all objects from a second products array. Below are some sample orders: const orders = [ { "order_details": { }, "order_id": "1", ...

javascriptnode.jsreactjstypescriptecmascript-6

Setting up ReactJS and TypeScript in a fresh MVC5 project from scratch

After extensively trying out various tutorials, I have yet to successfully run a basic MVC5 project using TypeScript and ReactJS. For reference, I have created these projects from scratch in Visual Studio 2015 with .NET 4.6.1, using the ASP.NET Web Applic ...

asp.netasp.net-mvcreactjstypescriptnpm

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

I have developed a unique plugin that offers multiple Grails controllers and domain objects. Additionally, I have created several AngularJS UI components that I wish to utilize in various other projects. These specific files are located within the web-app ...

javascriptangularjsgrailsgspgrails-resources-plugin

managing npm modules in node_modules folder through version control with Git

My git repositories contain separate npm package.json files that refer to one another. Although when I use npm install to install the main package, it copies all the referenced git repos into the node_modules folder successfully, they do not include the .g ...

gitnpm

What is the process of dynamically creating a Javascript object?

I have been experimenting with creating the following custom array: var deal_info = { "1": { "deal": { "deal_id": "1", "qty": "1", "option_price_sale": "7900", "price_ship": "2500", " ...

javascriptarraysjsonobject

The issue with IE-9 is that it is mistakenly picking up the placeholder value as

My HTML code looks like this: <input id="SLOCriteriaOtherText" name="SLOCriteriaOtherText" style="width: 100%;" type="text" data-role="autocomplete" placeholder="Enter name for 'other' metric..." class="k-input" autocomplete="off" role="textb ...

javascriptjqueryhtmlinternet-explorer

req.body is not defined or contains no data

I am facing an issue with my controllers and routers. bookController.js is functioning perfectly, but when I try to use userControllers for registration and login logic, req.body always appears empty. I tried logging the form data using console.log, but it ...

javascriptnode.jsformsexpress

Creating a read-only DIV using Angular - a step-by-step guide

Is there a simple way to make all clickable elements inside a div read only? For example, in the provided HTML code, these divs act like buttons and I want to disable them from being clicked. Any tips or shortcuts to achieve this? Thank you. #html < ...

javascriptangulartypescript

What is the best method for releasing an NX library along with all its bundled dependencies?

This problem is quite common in GitHub's NX repository, but I have not been able to find a solution there. Within my workspace, I have two buildable libraries: ui/avatar and ui/icon, as well as a publishable library named bar The goal is to utilize ...

angulartypescriptnpmtsconfignrwl-nx

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

I'm encountering an issue with updating the gridview TypeError: $.fn.yiiGridView is undefined; after using AjaxLink Click Button for Refresh <script> $(document).ready(function(){ $("#tombol_refresh").click(function(){ $.fn.yiiGridView ...

javascriptphpajaxyiimodel

When running the command `npx create-react-app client`, an error is thrown stating "Reading properties of undefined is not possible (reading 'isServer')."

Installing packages. Please wait while the necessary packages are being installed. Currently installing react, react-dom, and react-scripts with cra-template... Encountered an error: Unable to read properties of undefined (reading 'isSer ...

javascriptnode.jsreactjsnpmnpx

Tips for integrating a barcode scanner into a ReactJS application

As I work on developing a web application for Order Scan, I have encountered a major obstacle. My concern revolves around the process of how to receive data in my React.js application when a barcode successfully matches. To tackle this issue, I plan on uti ...

reactjsnpmbarcode-scanner

Issue with logging objects in an array within a for loop

I am having an issue with a JavaScript for-in loop. Why does console.log(user) display the number "0" when iterating through users? Is it indicating the index of the user object in the array? I would like to log each object individually... Thank you r ...

javascriptexpress

Ways to dynamically assign value to a checkbox using jquery

var sites = sites_str.split(","); $.each(sites,function(i,j) { $('.check').append("<input type=checkbox name=site_name value=sites[i]>"+sites[i] +"</br>" }) I am facing an issue when trying to retrieve the values of selected check ...

javascriptjquery

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

I am working on a VueJS application where I need to fetch a list of articles in one of my components. The logic is such that if the user is logged in, a specific request is made, and if not, another request is executed. Below is the snippet of code: <s ...

javascriptvue.jshook

Establishing the highest allowable value limit in cleave

I've integrated cleave.js into my Vue.js project to create a date input field. Here's the option configuration I used: <cleave :options="{ date: true, datePattern: ['m', 'd','Y'] ...

javascriptnpmvuejs2cleave

Promise.all() ensures that all promises in the array are resolved with the same value

Currently, I'm in the process of developing a module that contains a function designed to return a promise using Promise.all() for the purpose of sending emails to multiple users. By simplifying the code, I have managed to isolate and reproduce the is ...

javascriptnode.jspromisees6-promise

Steps to successfully retrieve an image using JavaScript on the client side while circumventing any CORS errors

I have a React application where I am displaying an image (an SVG) and I want the user to be able to download it by clicking on a button. The image is stored in Firebase Storage. However, I am encountering an issue with CORS error: Access to fetch at &ap ...

javascriptreactjscors