There is a missing dependency in the root installation of a custom node module

Currently, I have a project for an app and two separate node module projects. The dependency structure looks something like this:

App {
  NodeModule1 {
    NodeModule2,
    ...
  },
  ...
}

The issue I am facing is that instead of NodeModule2 being installed in the root directory of the app's node_modules App/node_modules/NodeModule2, it is actually installed in

App/node_modules/NodeModule1/node_modules/NodeModule2

This unexpected location is causing runtime errors where NodeModule2 is not found. My temporary solution has been to directly add NodeModule2 into the App folder, but this is not an ideal long-term fix.

All other dependencies of NodeModule1 are correctly installed at App/node_modules as expected.

Here is the package.json file for NodeModule2:

{
  "name": "NodeModule2",
  "version": "0.0.2-20210202.1.0",
  "private": false,
  "description": "",
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "16.13.1",
    "react-native": "0.59.10",
    ...
  }
}

Answer №1

I UNDERSTAND NOW

In order for a sub node_module to appear on the root level, all of its peerDependencies versions must match those of the App.

In my situation, both my App and NodeModule1 have a dependency on react-native-picker-select, but with different versions.

App {
  dependency: {
    "react-native-picker-select": "^8.0.0"
  }
}

NodeModule1 {
  dependency: {
    "react-native-picker-select": "8.0.0"
  }
}

NodeModule2 {
  peerDependency: {
    "react-native-picker-select": "8.0.0"
  }
}

In this instance, App received version 8.0.4 and NodeModule1 received version 8.0.0. Yarn placed NodeModule2 under NodeModule1 to share the same dependency version 8.0.0.

Solution: Ensure that all versions are aligned in App, NodeModule1, and NodeModule2.

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

Unusual outcome observed when inputting a random number into HTML using JavaScript

In my HTML file, I am trying to input a number within 50% of a target level into the "Attribute" field. Here is the code: <!DOCTYPE html> <html> <body> <input type = "number" name = "playerLevel" onchan ...

Ways to install or download packages without relying on npm install <package_name> or yarn install

My current job is at a financial institution where many external links and websites are restricted. For my project, I am using react and Node.js as the technology stack. Whenever I try to install new dependencies or run npm install, I encounter access is ...

"I'm trying to figure out the best way to use Selenium and Python to send a character sequence to a contenteditable element that has its attribute set

Recently, I've been experimenting with using Python 3.6 and Selenium to automate a simple task - logging into a chat website and sending messages automatically. is the webpage where I want to send the messages. Despite my limited experience with Py ...

Error: The configuration property is not defined, causing a TypeError at Class.run ~/node_modules/angular-cli/tasks/serve.js on line 22

I'm encountering a persistent error on my production server that indicates a missing angular.json file, even though the file is present in the root of my project! Every time I run npm start, npm build, or npm test, I receive the same error message. ...

Tips for refreshing a DOM element after inserting with jQuery

I'm trying to update the LI element after using the insertBefore function in jQuery. The issue arises after adding new elements to UL where I encounter difficulty deleting the same element (using emailTagRemove). Check out the demo to see the proble ...

Discovering the Essence of AngularJS Test Runner: Unraveling the

I recently started learning Angular JS and decided to follow the tutorial here. I've encountered a roadblock in step 8 where I need to write a test to check if the thumbnail images are being displayed. The concept behind it is simple. There is a JSON ...

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

"An alternative approach in node.js for implementing an AJAX saving mechanism, similar to the

For my JavaScript (client) + PHP (server) website, I have a system in place to save an "online notepad" from a #textbox textarea to the server: // client-side $("#save-button").on('click', save); function save(e) { $.ajax({ type: "POST", ...

Looking to retrieve object values in JavaScript in a dynamic manner?

Imagine having an array of objects with nested objects. The data is always changing, meaning the keys may vary each time. For instance: [ { "uuid": "53e7202c-28c8-4083-b910-a92c946a7626", "extraIdentifiers": { "National ID": "NAT2804" }, ...

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

Executing functions with directive controllers

Is there a simple way to call a function on a directive controller by accessing the instance using its id from the parent controller? <my-directive id="id1" /> var dirController = getDirectiveByID("id1"); dirController.someFunc(); If you have any ...

Incorporating Paged.JS functionality into a React/JS web application

My attempt to showcase my html page using paged.js in a react project has hit a snag. The html loads perfectly when accessed from local host (not via npm start, but the live server extension on vscode). However, following the steps outlined on this website ...

Working with AngularJS: Implementing a Service in a Controller

A service has been developed in AngularJS, but it is not being utilized in the controller. Service.js var appService = angular.module("appService", []); appService.service("bddService", function() { var bdds = bdd; this.getBdds = function(){ ...

Does CausesValidation validate all validators, including validation groups?

I have encountered an issue with my web page where I have 3 separate validation groups, but when I attempt to submit the form, I want all of the groups to validate simultaneously. It appears that using causesValidation="true" on the button does not trigge ...

What is the best way to add a multiselect option in Django to display detailed information for each selected item

Experience the Description Image I am looking to develop a mini demonstration similar to the image provided. When I click on an item in the left column to select a country, I want the right column to dynamically display all the cities of the chosen countr ...

Bypassing the "Your connection is not private" error in NodeJS + Express with fetch() using Javascript

Presently, I have a setup with a NodeJS + ExpressJS client-side server that communicates with the back-end server via API calls. However, every time I make a call, I need to manually navigate to the URL of the API back-end server and click on Advanced -> ...

Scanning barcodes with ease using the native script feature with the nativescript-barcodescanner plugin

I'm currently working on an android app using nativescript, but I'm facing issues with the scan method in the barcode scanner plugin. It seems to be the only plugin available for nativescript. Here is the code I found on this playground: The er ...

What is the AngularJS equivalent of prevAll() and nextAll() functions in jQuery?

Currently, I am working on a project that involves AngularJS and I'm having trouble finding an example that fits my needs... With AngularJS, I know how to apply a class when an element is clicked, but how can I add a class to all previous items and r ...

Angular's two-way binding feature allows the use of a variable as a string without directly assigning it to

Sample HTML code: <div tile-component included-svg='::installController.installUpdatesSvg'></div> Install controller: **A scope variable named 'installUpdatesSvg' is defined** this.installUpdateSvg = 'xyzSvg'; ...

Troubleshooting slow/delayed performance when using manual dataItem.set() in Kendo UI Grid

I recently implemented an editable Kendo Grid with a checkbox column to toggle a boolean value, thanks to an ingenious solution offered by OnaBai. The implementation works flawlessly! The only issue I'm facing is that there seems to be a delay in cha ...